import { Styled } from 'styleh-components'
import { Image } from 'atoms/Image'
import { Label, Heading } from 'atoms/Text'
import { Button, ButtonLabel } from 'atoms/Button'
import { ProductDetails, StyledSelectDropdown } from '../ProductDetails'
import { ShippingAddressCard, ItemWrapper } from '../ShippingAddressCard'
import { PaymentInformationCard } from '../PaymentInformationCard'

const ProductImage = styled.withComponent(Image).attrs({
  'data-qa': 'qa-product-image ',
})`
  flex: 0 0 50%;

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

const InformationBox = styled.div`
  display: flex;
  flex: 0 0 50%;
  flex-direction: column;
  @phone-or-smaller(){
    margin: 0 rem(8);
  }
`

const DeliveryDateContainer = styled.div`
  margin-bottom: rem(24);
`

const DeilveryDateLabel = styled.withComponent(Label).attrs({
  'data-qa': 'qa-expected-delivery-date',
})`
  color: #009944;
  font-weight: 500;
  font-size: rem(18);
`

const DeliveryDateWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: rem(8);
  flex-wrap: wrap;
`

const DeliveryDateText = styled.withComponent(Heading).attrs({
  'data-qa': 'qa-expected-date',
})`
  font-size: rem(26);
  color: #2c2c2c;
  margin: 0;
  font-weight: 400;

  @tablet-or-smaller() {
    flex: 0 0 100%;
    margin-bottom: rem(16);
  }
`

const ChangeDateLabel = styled.withComponent(Label).attrs({
  'data-qa': 'qa-change-date',
})`
  color: #159fd5;
  font-size: rem(18);
  text-transform: capitalize;

  @tablet-or-smaller() {
    flex: 0 0 100%;
  }

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

const StyledProductDetails = styled.withComponent(ProductDetails)`
  margin-bottom: rem(24);

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

const StyledConfirmSubscription = styled.withComponent(Button).attrs({
  'data-qa': 'qa-confirm-subscription',
})`
  width: 100%;
  border-radius: rem(4);
  background-color: #008a00;
  color: #ffffff;
  border: none;
  margin-bottom: rem(12);
  padding: 0 rem(10);
  height: rem(44);
  ${ButtonLabel} {
    text-transform: capitalize;
    font-size: rem(18);
  }
`
const StyledCancel = styled.withComponent(Button).attrs({
  'data-qa': 'qa-cancel',
})`
  width: 100%;
  border-radius: rem(4);
  background-color: #5F6C88;
  color: #ffffff;
  border: none;
  padding: 0 rem(10);
  height: rem(44);
  ${ButtonLabel} {
    text-transform: capitalize;
    font-size: rem(18);
  }
`
const StyledShippingAddressCard = styled
  .withComponent(ShippingAddressCard)
  .attrs({
    'data-qa': 'qa-shipping-address-container',
  })`
  margin-bottom: rem(24);

  ${ItemWrapper}:last-child {
    margin: 0;
  }
`

const StyledPaymentInformationCard = styled.withComponent(PaymentInformationCard)`
  margin-bottom: rem(24);
`

const Wrapper = styled.section`
  display: flex;

  @phone-or-smaller() {
    flex-direction: column;
  }
`

export {
  ProductImage,
  InformationBox,
  Wrapper,
  DeliveryDateContainer,
  DeilveryDateLabel,
  DeliveryDateWrapper,
  DeliveryDateText,
  ChangeDateLabel,
  StyledProductDetails,
  StyledConfirmSubscription,
  StyledCancel,
  StyledShippingAddressCard,
  StyledPaymentInformationCard,
}