import { styled } from 'styleh-components'
import { Button } from '@skava/ui/dist/components/atoms/Button'
import { InformationCard } from '@skava/ui/dist/components/organisms/InformationCard'
import { HeaderWrapper as Header } from 'abstractions/Subscription/ShippingAddressCard'
import {
  AddressWrapper,
  Name,
  AddressLine1,
  AddressLine2,
  City,
  Country,
  State,
  ZipCode,
  PhysicalAddress,
} from '@skava/ui/dist/components/molecules/PhysicalAddress'

const HeaderWrapper = styled(Header) `
  margin-bottom: rem(24);
  text-transform: capitalize;

  @phone-or-smaller() {
    margin-bottom: rem(16);
  }
`

const HeaderContent = styled.div.attrs({
  'data-qa': 'qa-shipping-address',
}) `
  font-size: rem(20);
  font-weight: 700;

  @tablet-or-smaller() {
    font-size: rem(18);
  }
`

const HeaderToggleButton = styled(Button).attrs({
  'data-qa': 'qa-new-shipping-address',
}) `
  color: var(--color-blue);
  background: none;
  border: none;
  padding: 0;
  font-size: rem(18);
  text-transform: capitalize;
  @tablet-or-smaller() {
    font-size: rem(16);
    justify-content: left;
    margin-top: $spacing;
  }
`

const StyledInformationCard = styled(InformationCard) `
  padding: 0;

  ${Name},
  ${AddressLine1},
  ${AddressLine2},
  ${City},
  ${State},
  ${Country} {
    font-size: rem(18);

    @phone-or-smaller() {
      font-size: rem(16);
    }
  }

  ${Name} {
    font-weight: 700;
  }
`

const StyledPhysicalAddress = styled(PhysicalAddress) `
  ${Name},
  ${AddressLine1},
  ${AddressLine2},
  ${City},
  ${State},
  ${Country} {
    font-size: rem(18);

    @phone-or-smaller() {
      font-size: rem(16);
    }
  }

  ${Name} {
    font-weight: 700;
  }
`

const ItemWrapper = styled.div.attrs({
  'data-qa': 'qa-address-details',
}) `
  border: rem(1) solid var(--color-dark-grey);
  border-radius: rem(4);
  margin-bottom: rem(16);
  padding: rem(16);

  ${props =>
    props.isDefaultAddress &&
    styled.css `
      border-color: var(--color-blue);
      border-width: rem(3);
    `};
`

export {
  HeaderWrapper,
  HeaderContent,
  HeaderToggleButton,
  StyledInformationCard,
  StyledPhysicalAddress,
  ItemWrapper,
}