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

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

const StyledShippingAddressOption = styled(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(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(StyledLabel).attrs({
  'data-qa': 'qa-saved-address',
}) `
  @font (18, semi);
  @phone-or-smaller() {
    @font (16, semi);
  }
`

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

export {
  StyledSingleShipping,
  StyledShippingAddressOption,
  StyledAddNewAddress,
  StyledSavedAddress,
}