import { styled } from 'styleh-components'
import { media } from '@skava/styleh-toolset'
import { Heading, Text } from '@skava/ui/dist/components/atoms/Text'
import { Button, ButtonText } from '@skava/ui/dist/components/atoms/Button'
import { Link } from '@skava/ui/dist/components/atoms/Link'
import { StyledImage } from '@skava/ui/dist/components/molecules/Figure'
import { AddressThemed } from 'presets/Address'
import {
  DetailedListItemPanel,
  DetailedListWrapper,
} from '@skava/ui/dist/components/molecules/DetailedList'
import { OrderItemWrapper } from 'abstractions/OrderHistory/ProductItem'
import {
  ProductItemV1,
  StyledProductImage,
} from 'presets/ProductPieces/ProductItemV1'

const StyledOrderItemWrapper = styled(OrderItemWrapper) `
  display: flex;
  flex-direction: column;
`
const StyledHeading = styled(Heading) `
  @font (18, bold);
  margin-bottom: rem(8);
  ${media.phoneOrSmaller `
    margin-top: 0;
  `}
`
const StyledShippingMethod = Text
const StyledButton = styled(Button) `
  width: rem(162);
  height: rem(44);
  border: rem(1) solid #2c2c2c;
  ${props =>
    props.color &&
    styled.css `
      background-color: ${props.color};
      color: var(--color-pure-white);
      border: 0;
    `}
  margin-bottom: rem(16);
  border-radius: rem(4);
  padding: 0;
  ${ButtonText} {
    margin: 0;
    color: var(--color-dark-grey);
    @font (18, medium);
    text-transform: capitalize;
    ${props =>
      props.color &&
      styled.css `
        color: var(--color-pure-white);
      `}
  }
  ${media.tabletOrSmaller `
    width: rem(148);
  `}
  ${media.phoneOrSmaller `
    width: 100%;
  `}
`
const StyledProductItem = styled(ProductItemV1) `
  ${StyledProductImage} {
    width: rem(160);
    height: rem(125);
    ${media.tabletOrSmaller `
      width: rem(136);
      height: rem(110);
    `}
  }
  ${StyledImage} {
    height: rem(125);
  }
  ${DetailedListWrapper} {
    margin-bottom: rem(8);
    ${media.tabletOrSmaller `
      margin-bottom: rem(14);
    `}
  }
  ${DetailedListItemPanel} {
    color: var(--color-dark-grey);
    font-size: rem(16);
    ${media.tabletOrSmaller `
      font-size: rem(11);
    `}
  }
`
const StyledLinkButton = styled(Link) `
  width: rem(162);
  height: rem(40);
  display: flex;
  align-items: center;
  text-decoration: none;
  ${props =>
    props.color &&
    styled.css `
      background-color: ${props.color};
      color: var(--color-pure-white);
      border: 0;
    `}
  border: rem(1) solid #2c2c2c;
  justify-content: center;
  color: var(--color-dark-grey);
  text-transform: capitalize;
  border-radius: rem(4);
  @font (18, medium);
  ${media.tabletOrSmaller `
    width: rem(148);
  `}
  ${media.phoneOrSmaller `
    width: 100%;
  `}
`

const StyledAddressThemed = styled(AddressThemed).attrs({
  dataQa: 'qa-order-shipping-address',
}) `
  flex: 0 0 100%;
  ${media.phoneOrSmaller `
    flex: 0 0 50%;
  `}
`

const StyledShippingMethodWrapper = styled.section.attrs({
  'data-qa': 'qa-order-shipping-methods',
}) `
  flex: 0 0 100%;
  ${media.phoneOrSmaller `
    flex: 0 0 50%;
  `}
`

const ShippingLabel = styled(Heading) `
  margin: 0;
  font-size: rem(20);
  color: var(--color-black);
  text-transform: capitalize;
`
const ShippingValue = styled.span `
  margin-left: rem(16);
  font-size: rem(16);
  text-transform: capitalize;
  color: red;
`

export {
  StyledHeading,
  StyledShippingMethod,
  StyledButton,
  StyledProductItem,
  StyledLinkButton,
  StyledShippingMethodWrapper,
  ShippingLabel,
  ShippingValue,
  StyledAddressThemed,
  StyledOrderItemWrapper,
}