import { styled } from 'styleh-components'
import { Link } from 'atoms/Link'
import { Quantity, StyledIncrementer } from 'presets/Quantity'
import { ProductItem } from 'abstractions/BundleProduct/CheckoutCartBundle'
import {
  TotalPriceBox,
  ProductBox,
} from 'abstractions/BundleProduct/CheckoutCartBundle/ProductItem'
import {
  ProductImageWithCaption,
  ProductName,
  ProductPrice,
  SalePrice,
  RegularPrice,
} from 'presets/ProductPieces'
import {
  DetailedList,
  DetailedListLabel,
  DetailedListValue,
  DetailedListItemPanel,
} from 'molecules/DetailedList'
import { StyledImage, FigureCaption } from 'molecules/Figure'
import {
  Incrementer,
  IncrementerWrapper,
  StyledInput,
  InputBoxWrapper,
  StyledButton,
  Arrow,
  ArrowWrapper,
} from 'src/inputs/Incrementer'

const TotalPrice = styled.span `
  font-weight: 600;
  font-size: rem(16);
  margin-bottom: rem(8);
`
const SavePrice = styled.span `
  color: #64718c;
  font-size: rem(14);
`
const StyledTotalPrice = styled.withComponent(TotalPriceBox) ``

const StyledItemPrice = styled.withComponent(ProductPrice) `
  display: flex;
  flex-direction: column;
  flex: 0 0 20%;
  align-items: flex-end;

  @phone-or-smaller() {
    padding-left: rem(120);
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    flex: 0 0 100%;
  }
  ${SalePrice} {
    color: #EA2227;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    margin-bottom: rem(8);
    @phone-or-smaller() {
      margin-right: rem(16);
      margin-bottom: 0;
    }
  }
  ${RegularPrice} {
    font-size: 16px;
    font-weight: 500;
    color: #2c2c2c;
  }
`
const StyledQuantity = styled.withComponent(Quantity) `
  display: flex;
  flex: 0 0 20%;
  justify-content: flex-end;
  align-items: baseline;

  ${IncrementerWrapper} {
    width: rem(110);
    height: rem(44);
    border: solid #A6AFC1 1px;
    border-radius: rem(2);
    align-items: center;
    padding: 0 rem(14);

    @media screen and (min-width: 768px) and (max-width: 1023px) {
      border-radius: rem(4);
    }

    @phone-or-smaller() {
      margin-bottom: rem(8);
      border-radius: rem(4);
    }
  }
  ${StyledInput} {
    font-size: rem(16);
  }
  ${ArrowWrapper} {
    ${StyledButton}:first-child {
      margin-bottom: rem(2);
    }
  }
  @phone-or-smaller() {
    padding-left: rem(120);
    justify-content: flex-start;
    flex: 0 0 100%;
  }
`
const StyledDetailedList = styled.withComponent(DetailedList) `
  h3 {
    display: none;
  }
  ${DetailedListItemPanel} {
    margin: 0;
  }
  @phone-or-smaller() {
    ${DetailedListItemPanel} {
      flex-direction: row;
    }
    ${DetailedListValue} {
      margin: 0;
      margin-left: 5px;
    }
  }
  ${DetailedListLabel}, ${DetailedListValue} {
    color: #5F6C88;
    text-transform: capitalize;

    @tablet-or-smaller() {
      font-size: rem(12);
    }
  }
  ${DetailedListValue} {
    margin-left: 5px;
  }
`
const StyledProductName = styled.withComponent(ProductName).attrs({
  'data-qa': 'qa-product-name',
}) `
  margin: 0;
  margin-bottom: rem(8);
  font-weight: 400;
  text-transform: capitalize;
  @tablet-or-smaller() {
    font-size: rem(12);
  }
`
const StyledLink = styled.withComponent(Link) `
  text-decoration: none;
`

const StyledImageLink = styled.withComponent(StyledLink) `
  text-decoration: none;
  height: 127px;
  flex: 0 0 158px;
  @tablet-or-smaller() {
    flex: 0 0 118px;
    height: 95px;
  }
  @phone-or-smaller() {
    flex: 0 0 112px;
    height: 90px;
  }
`

const StyledBrandName = styled.withComponent(ProductName) `
  margin: 0;
  margin-bottom: rem(8);
  text-transform: capitalize;
  @tablet-or-smaller() {
    font-size: rem(14);
  }
`
const StyledProductDetails = styled.div `
  margin-left: rem(30);
  @tablet-or-smaller() {
    margin-left: rem(8);
  }
`
const StyledImageWithCaption = styled.withComponent(ProductImageWithCaption) `
  width: 100%;
  height: 127px;
  flex: 0 0 158px;
  @tablet-or-smaller() {
    flex: 0 0 118px;
    height: 95px;
  }
  @phone-or-smaller() {
    flex: 0 0 112px;
    height: 90px;
  }
  ${StyledImage} {
    height: 100%;
  }
  ${FigureCaption} {
    bottom: 8px;
    &:first-letter {
      text-transform: capitalize;
    }
  }
`
const StyledProduct = styled.withComponent(ProductBox) ``

const ProductItemPlaceholder = styled.withComponent(ProductItem) `
  @phone-or-smaller() {
    justify-content: flex-start;
  }
`
export {
  TotalPrice,
  SavePrice,
  StyledTotalPrice,
  StyledItemPrice,
  StyledQuantity,
  StyledDetailedList,
  StyledProductName,
  StyledBrandName,
  StyledImageLink,
  StyledLink,
  StyledProductDetails,
  StyledImageWithCaption,
  StyledProduct,
  ProductItemPlaceholder,
}
export default StyledProductDetails