import { styled } from 'styleh-components'
import { StyledBaseText } from 'atoms/Text'
import { Image } from 'atoms/Image'
import { Link } from 'atoms/Link'
import { ProductName, ProductPrice } from 'presets/ProductPieces'
import {
  DetailedList,
  DetailedListLabel,
  DetailedListValue,
  DetailedListItemPanel,
} from 'molecules/DetailedList'
import { Quantity } from 'presets/Quantity'
import { IncrementerWrapper, StyledInput } from 'src/inputs/Incrementer'

const StyledLink = styled.withComponent(Link)`
  text-decoration: none;
`
const StyledImageLink = styled.withComponent(StyledLink).attrs({
  'data-qa': 'qa-product-image',
})`
  text-decoration: none;
  height: rem(127);
  flex: 0 0 rem(158);
  @tablet-or-smaller() {
    flex: 0 0 rem(118);
    height: rem(95);
  }
  @phone-or-smaller() {
    flex: 0 0 rem(112);
    height: rem(90);
  }
`

const StyledImage = styled.withComponent(Image)`
  flex: 0 0 rem(158);

  @tablet-or-smaller() {
    flex: 0 0 rem(118);
    height: rem(95);
  }
  @phone-or-smaller() {
    flex: 0 0 rem(112);
    height: rem(90);
  }
`
const StyledBrandName = styled.withComponent(ProductName)`
  margin: 0;
  margin-bottom: rem(8);
  text-transform: capitalize;
  @tablet-or-smaller() {
    font-size: rem(14);
  }
`
const StyledProductName = styled.withComponent(ProductName)`
  margin: 0;
  margin-bottom: rem(8);
  font-weight: 400;
  text-transform: capitalize;
  @tablet-or-smaller() {
    font-size: rem(12);
  }
`
const StyledDetailedList = styled.withComponent(DetailedList)`
  h3 {
    display: none;
  }
  ${DetailedListItemPanel} {
    margin: 0;
  }
  ${DetailedListLabel}, ${DetailedListValue} {
    color: var(--color-dark-grey);
    text-transform: capitalize;

    @tablet-or-smaller() {
      font-size: rem(12);
    }
  }
  ${DetailedListValue} {
    margin-left: rem(4);
  }

  @phone-or-smaller() {
    ${DetailedListItemPanel} {
      flex-direction: row;
    }
    ${DetailedListValue} {
      margin: 0;
      margin-left: rem(4);
    }
  }

`
const StyledQuantity = styled.withComponent(Quantity)`
  ${IncrementerWrapper} {
    width: rem(110);
    height: rem(44);
    border: rem(1) solid var(--color-light-grey);
    border-radius: rem(2);
    align-items: center;
    padding: 0 rem(14);

    @tablet-or-smaller() {
      border-radius: rem(4);
    }

    @phone-or-smaller() {
      margin-bottom: rem(8);
    }
  }
  ${StyledInput} {
    font-size: rem(16);
  }
  @phone-or-smaller() {
    padding-left: rem(120);
    justify-content: flex-start;
    flex: 0 0 100%;
  }
`
const StyledText = StyledBaseText.as('span')

const StyledLabel = styled.withComponent(StyledText)`
  display: none;
  text-transform: capitalize;
  @phone-or-smaller() {
    display: flex;
    padding-right: rem(8);
  }
`
const StyledQuantityValue = StyledText

const IdentifierWrapper = styled.div`
  display: flex;
`
const StyledIdentifier = styled.withComponent(StyledText)`
  color: var(--color-dark-grey);
  text-transform: capitalize;

  &:last-child {
    margin-left: rem(4);
  }

  @tablet-or-smaller() {
    font-size: rem(12);
  }
`

const StyledPrice = styled.withComponent(ProductPrice)`
  display: flex;
  flex-direction: column;

  @phone-or-smaller() {
    flex-direction: row;
  }
`
const StyledWrapper = styled.div`
  display: flex;
  flex-direction: row;
`
const TotalPrice = styled.span`
  font-weight: 600;
  font-size: rem(16);
  margin-bottom: rem(8);
  text-transform: capitalize;
`
const SavePrice = styled.span`
  color: var(--color-dark-grey);
  font-size: rem(14);
`

export {
  StyledImageLink,
  StyledLink,
  StyledProductName,
  StyledDetailedList,
  IdentifierWrapper,
  StyledIdentifier,
  StyledQuantity,
  StyledQuantityValue,
  StyledPrice,
  TotalPrice,
  SavePrice,
  StyledBrandName,
  StyledImage,
  StyledLabel,
  StyledWrapper,
}