import { styled } from 'styleh-components'
import { Heading, Text } from 'atoms/Text'
import { SelectDropDown, StyledSelect, SelectText } from 'molecules/SelectDropDown'
import { ProductName, ProductPrice } from 'presets/ProductPieces'
import { Quantity, StyledTitle } from 'presets/Quantity'
import { IncrementerWrapper, StyledButton } from 'src/inputs/Incrementer'
import { List, ItemPanel, StyledText } from 'molecules/List'
import { SwatchList, StyledSwatchesButton } from 'presets/SwatchList'

const StyledSwatchList = styled.withComponent(SwatchList)`
  ${StyledSwatchesButton} {
    width: rem(100);
    margin-bottom: rem(24);
    padding: 0;

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

    &.selected {
      border-width: 2px;
    }

    @phone-or-smaller() {
      margin-bottom: rem(16);
    }
  }
`
const StyledHeading = styled.withComponent(Heading)`
  color: var(--color-black);
  text-transform: capitalize;
  margin: 0;
  margin-bottom: rem(24);
  font-size: rem(20);

  @phone-or-smaller() {
    font-size: rem(18);
  }
`
const StyledProductTitle = styled.withComponent(ProductName).attrs({
  'data-qa': 'qa-product-name',
})`
  margin: 0;
  margin-bottom: rem(8);
  font-size: rem(24);
  font-weight: 700;

  @phone-or-smaller() {
    font-size: rem(20);
  }
`
const StyledSkuLabel = styled.withComponent(Text)`
  text-transform: uppercase;
  color: var(--color-dark-grey);
  font-size: rem(16);
`
const StyledSkuValue = styled.withComponent(Text)`
  margin-left: rem(4);
  color: var(--color-dark-grey);
  font-size: rem(16);
`
const StyledProductPrice = styled.withComponent(ProductPrice).attrs({
  'data-qa': 'qa-product-price',
})`
  font-size: rem(26);
  font-weight: bold;

  @phone-or-smaller() {
    font-size: rem(20);
  }
`
const StyledList = styled.withComponent(List)`
  line-height: rem(24);
  padding-left: rem(24);

  ${ItemPanel} {
    list-style: disc;
    color: var(--color-dark-grey);
    padding: 0;
    font-size: rem(10);

    ${StyledText} {
      font-size: rem(16);
      margin-left: rem(14);
    }
  }
`
const StyledQuantity = styled.withComponent(Quantity).attrs({
  'data-qa': 'qa-product-quantity',
})`
  width: rem(100);

  ${StyledTitle} {
    display: none;
  }

  ${StyledButton} {
    padding: 0 rem(5);
  }

  ${IncrementerWrapper} {
    padding: rem(10) rem(20);
    border: rem(1) solid var(--color-light-grey);
    border-radius: rem(4);
  }
`
const StyledSelectDropdown = styled.withComponent(SelectDropDown).attrs({
  'data-qa': 'qa-frequency-dropdown',
})`
  width: rem(328);
  border-radius: rem(4);
  ${StyledSelect} {
    padding: 0 rem(8);
  }
  ${SelectText} {
    font-size: rem(16);
    color: var(--color-black);
  }
  svg {
    fill: var(--color-dark-grey);
  }
  @phone-or-smaller() {
    width: 100%;
  }
`

export {
  StyledHeading,
  StyledProductTitle,
  StyledSkuLabel,
  StyledSkuValue,
  StyledProductPrice,
  StyledList,
  StyledQuantity,
  StyledSelectDropdown,
  StyledSwatchList,
}