import { styled } from 'styleh-components'
import Image, { ImageProps } from '@skava/ui/dist/components/atoms/Image'
import {
  Heading,
  Text,
  Paragraph,
  LabelElement,
} from '@skava/ui/dist/components/atoms/Text'
import {
  Button,
  ButtonElement,
  ButtonText,
} from '@skava/ui/dist/components/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 '@skava/ui/dist/components/molecules/DetailedList'
import { MaterialIcon } from '@skava/ui/dist/components/atoms/MaterialIcon'

const StyledSubscription = styled(MaterialIcon) `
  fill: #f88f22;
`

const ProductImage = styled(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(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(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(Text).attrs({
  'data-qa': 'qa-product-option',
}) `
  ${ProductFacetsStyles}

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

// @name ProductQuantity was invalid
// @note - all fonts are roboto
// font-family: "Roboto";
const ProductQuantity = styled(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(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(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(Text) `
  margin-left: rem(16);
`

const StyledFrequencyWrapper = styled(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(Button).attrs({
  'data-qa': 'qa-order-return-trigger',
}) `
  .blue {
    background: var(--color-blue);
  }
  background: var(--color-blue);
  margin-bottom: 15px;
`

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

const LinkButtonElement = styled(LinkButton) `
  ${ButtonText} {
    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,
  StyledSubscription,
}