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 ProductImage = styled.withComponent(Image)`
  background-color: var(--color-white-grey);
  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: var(--color-black);
  padding: 8px 0 0 0;

  ${props =>
    props.isSubscriptionItem &&
    styled.css`
      color: var(--color-dark-grey);
      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: var(--color-black);
  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: var(--color-dark-grey);
  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: var(--color-black);
  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: var(--color-dark-grey);
  }

  ${DetailedListValue} {
    color: var(--color-dark-grey);
    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: var(--color-dark-grey);
`

const Value = styled.span`
  color: var(--color-dark-grey);
  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: var(--color-black);
    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: var(--color-red);
      }
    `}
`

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

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: var(--color-blue);
  }
  background: var(--color-blue);
  margin-bottom: 15px;
`

const ProductItemButtonTwo = styled.withComponent(Button).attrs({
  'data-qa': 'qa-order-again',
})`
  background: var(--color-light-grey);
`

const LinkButtonElement = styled.withComponent(LinkButton)`
  ${ButtonLabel} {
    color: var(--color-blue);
  }
`

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

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