import { styled } from 'styleh-components'
import { Image } from '@skava/ui/dist/components/atoms/Image'
import { Label, Heading } from '@skava/ui/dist/components/atoms/Text'
import { Button, ButtonText } from '@skava/ui/dist/components/atoms/Button'
import { ProductDetails, StyledSelectDropdown } from '../ProductDetails'
import { ShippingAddressCard, ItemWrapper } from '../ShippingAddressCard'
import { PaymentInformationCard } from '../PaymentInformationCard'

const ProductImage = styled(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 DeliveryDateLabel = styled(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(Heading).attrs({
  'data-qa': 'qa-expected-date',
}) `
  font-size: rem(26);
  color: var(--color-black);
  margin: 0;
  font-weight: 400;

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

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

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

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

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

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

const StyledConfirmSubscription = styled(Button).attrs({
  'data-qa': 'qa-confirm-subscription',
}) `
  width: 100%;
  border-radius: rem(4);
  background-color: var(--color-dark-green);
  color: var(--color-pure-white);
  border: none;
  margin-bottom: rem(12);
  padding: 0 rem(10);
  height: rem(44);
  ${ButtonText} {
    text-transform: capitalize;
    font-size: rem(18);
  }
`
const StyledCancel = styled(Button).attrs({
  'data-qa': 'qa-cancel',
}) `
  width: 100%;
  border-radius: rem(4);
  background-color: var(--color-dark-grey);
  color: var(--color-pure-white);
  border: none;
  padding: 0 rem(10);
  height: rem(44);
  ${ButtonText} {
    text-transform: capitalize;
    font-size: rem(18);
  }
`
const StyledShippingAddressCard = styled(ShippingAddressCard).attrs({
  'data-qa': 'qa-shipping-address-container',
}) `
  margin-bottom: rem(24);

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

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

const Wrapper = styled.section `
  display: flex;

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

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