import { styled } from 'styleh-components'
import Image, { ImageProps } from 'atoms/Image'
import { Heading, Text, Paragraph, LabelElement } from 'atoms/Text'
import { Button, ButtonElement, ButtonLabel } from 'atoms/Button'
import { ProductItemWrapper, FrequencyWrapper, ProductDetails, ProductImageWrapper } from 'abstractions/Order/ProductItem'
import { LinkButton } from 'presets/Buttons'
import { ProductPrice as ProductPriceItem, RegularPrice, SalePrice } from 'presets/ProductPieces/ProductPrice'
import {
  DetailedList,
  DetailedListLabel,
  DetailedListValue,
  DetailedListItemPanel,
} from 'molecules/DetailedList'

const ProductItemWrapperItem = styled.withComponent(ProductItemWrapper)`
  display: flex;
  flex-wrap: wrap;
`

const ProductImage = styled.withComponent(Image)`
  background-color: #F0EFEB;
  width: rem(180);
  height: rem(128);
  overflow: hidden;
  padding: 5px;
  @media (max-width: 1023px) {
    width: rem(136);
    height: rem(109);
  }

  ${props => props.singleProduct && styled.css`
    @media (max-width: 1023px) {
      width: 100%;
    }
  `}

  ${props => props.isSubscriptionItem && styled.css`
    width: 100%;
    background-color: transparent;

    @media (max-width: 1023px) {
      width: 100%;
    }
  `}
`

const ProductItemsWrapper = styled.div`
  flex: 0 0 70%;
  display: flex;
  @phone-or-smaller() {
    flex: 0 0 100%;
  }
`

const ProductDescription = styled.withComponent(Paragraph)`
  font-size: 16px;
  color: #2c2c2c;
  padding: 8px 0 0 0;

  ${props => props.isSubscriptionItem && styled.css`
    color: #5f6c88;
    margin-top: 0;
    padding: 0;
  `}
`

// @note - all fonts are roboto
// font-family: "Roboto";
const ProductTitle = styled.withComponent(Heading).attrs({
  'data-qa': 'qa-product-name',
})`
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #2c2c2c;
  font-weight: 500;
  line-height: rem(24);
  white-space: normal;
  word-wrap: break-word;
  @media (max-width: 1023px) {
    font-size: 14px;
    font-weight: 700;
  }
`

const ProductFacetsStyles = styled.css`
  font-size: 16px;
  color: #5f6c88;
  font-weight: 400;
  margin-bottom: 3px @media (max-width: 1023px) {
    font-size: 11px;
  }
`

// @note - all fonts are roboto
// font-family: "Roboto";
const ProductFacets = styled.withComponent(Text).attrs({
  'data-qa': 'qa-product-option',
})`
  ${ProductFacetsStyles}

  ${props => props.isSubscriptionItem && styled.css`
    margin-bottom: 8px;
  `}
`
/*
const StyledProductItemId = styled.withComponent(Text).attrs({
  'data-qa': 'qa-identifier',
})`
  ${ProductFacetsStyles}
` */

// @name ProductQuantity was invalid
// @note - all fonts are roboto
// font-family: "Roboto";
const ProductQuantity = styled.withComponent(Text).attrs({
  'data-qa': 'qa-product-quantity',
})`
  font-size: 16px;
  color: #2C2C2C;
  margin-top: 8px;
  font-weight: 500;
  @media (max-width: 1023px) {
    font-size: 14px;
  }
`

const FacetContainer = styled.withComponent(DetailedList)`
  ${DetailedListItemPanel} {
    margin: 0;
    margin-bottom: rem(8);
  }
  ${DetailedListLabel} {
    text-transform: capitalize;
    color: #5f6c88;
  }

  ${DetailedListValue} {
    color: #5f6c88;
    font-weight: 700;
    margin-left: rem(4);
  }
`

const Container = styled.div`
  margin-bottom: rem(8);
`

const Label = styled.span`
  font-size: rem(16);
  text-transform: capitalize;
  color: #5f6c88;
`

const Value = styled.span`
  color: #5f6c88;
  font-weight: 700;
  margin-left: rem(4);
`

// @note - all fonts are roboto
// font-family: "Roboto";
// font-family: "Roboto";
const ProductPrice = styled.withComponent(ProductPriceItem)`
  ${RegularPrice} {
    font-size: 16px;
    color: #2C2C2C;
    font-weight: 500;
    margin-top: 8px;

    @media (max-width: 1023px) {
      font-size: 14px;
    }
  }
  ${props => props.isSubscriptionItem && styled.css`
    margin: 16px 24px 16px 0;
    ${SalePrice} {
      font-weight: 700;
      color: #D0021B;
    }
  `}
`

const FrequencyContent = styled.withComponent(Text)`
  margin-left: 16px;
`

const StyledFrequencyWrapper = styled.withComponent(FrequencyWrapper).attrs({
  'data-qa': 'qa-monthly-subscription',
})`
  align-items: center;
  justify-content: flex-start;
  .frequencyIcon {
    width: 28px;
    height: auto;
    color: #f88f22;
  }
`

// @todo should not add .blue!!!
const ProductItemButtonOne = styled.withComponent(Button).attrs({
  'data-qa': 'qa-order-return-trigger',
})`
  .blue {
    background: #159FD5;
  }
  background: #159FD5;
  margin-bottom: 15px;
`

const ProductItemButtonTwo = styled.withComponent(Button).attrs({
  'data-qa': 'qa-order-again-trigger',
})`
  background: #A6AFC1;
`

const LinkButtonElement = styled.withComponent(LinkButton)`
  ${ButtonLabel} {
    color: #159FD5;
  }
`

const ReviewWrapper = styled.div`
  margin-top: 15px;
`

export {
  ProductItemWrapperItem,
  ProductImage,
  ProductTitle,
  ProductFacets,
  ProductQuantity,
  FacetContainer,
  ProductDescription,
  ProductPrice,
  FrequencyContent,
  StyledFrequencyWrapper,
  //
  ProductItemButtonOne,
  ProductItemButtonTwo,
  LinkButtonElement,
  //
  ReviewWrapper,
  // StyledProductItemId,
  Container,
  Label,
  Value,
}