import { styled } from 'styleh-components'
import { Label } from 'atoms/Text'
import { ShippingAddress } from 'src/forms/views/ShippingAddress'
import { ShippingAddressOption } from '../ShippingAddressOption'
import {
  ToggleItemIconWrapper,
  ToggleItemWrapper,
  ToggleContentWrapper,
} from 'molecules/ToggleList'

const StyledSingleShipping = styled.withComponent(ShippingAddress)`
  margin-top: rem(20);
`

const StyledShippingAddressOption = styled
  .withComponent(ShippingAddressOption)
  .attrs({
    dataQa: 'qa-address-container',
  })`
  ${props =>
    props.length > 2 &&
    styled.css`
      ${ToggleContentWrapper} {
        flex-direction: row;
        flex-wrap: wrap;
      }
      ${ToggleItemWrapper} {
        flex: 0 0 33.33%;
      }
    `}
  ${ToggleItemIconWrapper}
  {
    margin-right: 0;
  }
  margin-right: 0;
  margin-top: rem(20);
`
const StyledLabel = styled.withComponent(Label)`
  text-transform: capitalize;
  color: var(--color-black);
  font-weight: 700;
  cursor: pointer;

  ${props =>
    props.isExpanded &&
    styled.css`
      color: var(--color-blue);
    `}
`

const StyledSavedAddress = styled.withComponent(StyledLabel).attrs({
  'data-qa': 'qa-saved-address',
})`
  @font(18, semi);
  @phone-or-smaller() {
    @font(16, semi);
  }
`

const StyledAddNewAddress = styled.withComponent(StyledLabel).attrs({
  'data-qa': 'qa-add-address-button',
})`
  @font(18, semi);
  @phone-or-smaller() {
    @font(16, semi);
  }
`

export {
  StyledSingleShipping,
  StyledShippingAddressOption,
  StyledAddNewAddress,
  StyledSavedAddress,
}