import { styled } from 'styleh-components'
import { Button, ButtonText } from '@skava/ui/dist/components/atoms/Button'
import { Label, Heading } from '@skava/ui/dist/components/atoms/Text'
import { ProductPrice, SalePrice, RegularPrice } from 'presets/ProductPieces'

const StyledButton = styled.withComponent(Button)`
  border: none;
  border-radius: rem(4);
  margin-bottom: rem(16);

  ${ButtonText} {
    text-transform: capitalize;
  }
`
const BuyNowButton = styled.withComponent(StyledButton)`
  background-color: var(--color-blue);
  color: var(--color-pure-white);
`

const SaveSubscriptionButton = styled.withComponent(StyledButton)`
  background-color: var(--color-dark-green);
  color: var(--color-pure-white);
`
const SkipButton = styled.withComponent(StyledButton)`
  background-color: var(--color-pure-white);
  color: #606d89;
  border: rem(1) solid var(--color-dark-grey);
`
const CancelSubscriptionButton = styled.withComponent(StyledButton)`
  background-color: var(--color-dark-grey);
  color: var(--color-pure-white);
  margin-bottom: 0;
`
const StyledProductPrice = styled.withComponent(ProductPrice)`
  margin-bottom: rem(30);
  font-size: rem(20);
  ${SalePrice} {
    color: #009944;
    font-weight: 700;
    margin-right: rem(16);
  }
  ${RegularPrice} {
    font-weight: 700;
  }
`
const DeliveryDateContainer = styled.div`
  margin-top: rem(16);
`

const DeilveryDateLabel = styled.withComponent(Label)`
  color: #009944;
  font-weight: 500;
  font-size: rem(16);
`

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

const DeliveryDateText = styled.withComponent(Heading)`
  font-size: rem(20);
  color: var(--color-black);
  margin: 0;
  font-weight: 400;
`

const ChangeDateLabel = styled.withComponent(Label)`
  color: var(--color-blue);
  font-size: rem(16);
  text-transform: capitalize;
`

const SubscriptionText = styled.span`
  color: var(--color-dark-grey);
`
const LastDayToUpdateOrder = styled.span`
  color: var(--color-dark-grey);
  font-weight: 700;
  margin-left: rem(4);
  @tablet-or-smaller() {
    margin: 0;
  }
`
const SubscriptionTextWrapper = styled.div`
  display: flex;
  @tablet-or-smaller() {
    flex-direction: column;
  }
`
const DeliverDate = styled.div`
  margin-top: rem(30) 0;
`
export {
  BuyNowButton,
  SaveSubscriptionButton,
  SkipButton,
  CancelSubscriptionButton,
  StyledProductPrice,
  DeliveryDateContainer,
  DeilveryDateLabel,
  DeliveryDateWrapper,
  DeliveryDateText,
  ChangeDateLabel,
  SubscriptionText,
  LastDayToUpdateOrder,
  SubscriptionTextWrapper,
  DeliverDate,
}