import { styled } from 'styleh-components'
import { Link } from '@skava/ui/dist/components/atoms/Link'
import { ImagePlaceholder } from '@skava/ui/dist/components/atoms/Placeholder'
import { Heading } from '@skava/ui/dist/components/atoms/Text'
import { Toggle } from '@skava/ui/dist/components/molecules/Toggle'
import {
  Figure,
  FigureCaption,
  StyledImage,
} from '@skava/ui/dist/components/molecules/Figure'
import {
  DetailedList,
  DetailedListItemPanel,
  DetailedListValue,
} from '@skava/ui/dist/components/molecules/DetailedList'
import { Ratings } from 'presets/Ratings'

const TotalText = styled.span `
  font-weight: bold;
  margin-bottom: 5px;
`

const SaveText = styled.span `
  font-size: rem(14);
`

const TotalWrapper = styled.div `
  display: flex;
  flex-direction: column;
  ${(props: { type?: string }) =>
    props.type === 'checkout' &&
    styled.css `
      @tablet-or-larger() {
        flex: 0 0 20%;
        align-items: flex-end;
      }
    `};
`

const StyledQuantityValue = styled.span ``

const StyledText = styled.span `
  margin-right: rem(4);

  ${(props: { type?: string }) =>
    props.type === 'checkout' &&
    styled.css `
      @tablet-or-larger() {
        display: none;
      }
    `};
`

const IncrementerWrapper = styled.div.attrs({
  'data-qa': 'qa-product-quantity',
}) `
  display: flex;
  ${(props: { type?: string }) =>
    props.type === 'checkout' &&
    styled.css `
      @tablet-or-larger() {
        flex: 0 0 20%;
        justify-content: flex-end;
      }
      max-height: rem(44);
    `};
`

const StyledPromoText = styled.span `
  font-size: rem(14);
  color: var(--color-dark-green);
  cursor: pointer;
`

const StyledPromoWrapper = styled.div `
  display: flex;
  flex-direction: column;
`

const StyledDetailedList = styled(DetailedList) `
  ${DetailedListItemPanel} {
    margin: rem(4) 0;
    flex-direction: row;
    align-items: center;
  }
  ${DetailedListValue} {
    margin: 0 0 0 rem(4);
  }
`

const StyledRatings = styled(Ratings) `
  margin: rem(4) 0;
`

const StyledBrandName = styled(Heading).attrs({
  'data-qa': 'qa-brand-name',
}) `
  margin: 0 0 rem(8);
  ${(props: { type?: string }) =>
    props.type === 'vertical' &&
    styled.css `
      margin: rem(8) 0;
    `};
`

const StyledProductName = styled(Heading).attrs({
  'data-qa': 'qa-product-name',
}) `
  margin: 0 0 rem(8);
  color: var(--color-black);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
`

const ProductDetailWrapper = styled.div `
  display: flex;
  flex-direction: column;
  flex: 1;
`

const PriceWrapper = styled.div `
  display: flex;
  margin: 0 rem(-4);
  ${(props: { type?: string }) =>
    props.type === 'checkout' &&
    styled.css `
      @tablet-or-larger() {
        flex-direction: column;
        flex: 0 0 20%;
        align-items: flex-end;
      }
    `};
`

const SalePrice = styled.span.attrs({
  'data-qa': 'qa-sale-price',
}) `
  padding: rem(4);
  color: var(--color-red);
`

const RegularPrice = styled.span.attrs({
  'data-qa': 'qa-reg-price',
}) `
  padding: rem(4);
  ${(props: { isOnlyPrice: boolean }) =>
    props.isOnlyPrice === true
      ? styled.css `
          color: var(--color-red);
        `
      : styled.css `
          text-decoration: line-through;
          color: var(--color-black);
        `};
`

const StyledImagePlaceholder = styled(ImagePlaceholder) `
  ${(props: { type?: string }) =>
    props.type === 'horizontal' &&
    styled.css `
      width: rem(250);
      height: rem(250);
      margin-right: rem(32);
    `};
`

const StyledToggleFavorite = styled(Toggle) `
  width: rem(24);
  height: rem(24);
  position: absolute;
  right: 0;
  z-index: 1;
  margin: rem(8);
`

const StyledProductImage = styled(Figure) `
  display: flex;
  position: relative;
  height: rem(200);
  ${(props: { type?: string }) =>
    (props.type === 'horizontal' || props.type === 'checkout') &&
    styled.css `
      width: rem(200);
      @phone-or-smaller() {
        width: rem(150);
      }
    `};

  ${StyledImage} {
    width: 100%;
    height: rem(200);
    background-color: var(--color-light-grey);

    ${(props: { type?: string }) =>
      (props.type === 'horizontal' || props.type === 'checkout') &&
      styled.css `
        width: rem(200);
        @phone-or-smaller() {
          width: rem(150);
        }
      `};
  }

  ${FigureCaption} {
    position: absolute;
    bottom: rem(25);
    ${(props: { type?: string }) =>
      (props.type === 'horizontal' || props.type === 'checkout') &&
      styled.css `
        bottom: rem(15);
      `};
    background-color: var(--color-dark-green);
    padding: rem(4);
    color: var(--color-pure-white);
  }
`

const StyledLink = styled(Link) `
  text-decoration: none;
`

const ImageWrapper = styled.div `
  position: relative;
  ${(props: { type?: string }) =>
    (props.type === 'horizontal' || props.type === 'checkout') &&
    styled.css `
      margin-right: rem(16);
      @phone-or-smaller() {
        margin-right: rem(8);
      }
    `};
`

const ProductWrapper = styled.div `
  display: flex;
  flex-direction: column;
  ${(props: { type?: string }) =>
    (props.type === 'horizontal' || props.type === 'checkout') &&
    styled.css `
      flex: 1;
      @tablet-or-larger() {
        flex-direction: row;
      }
    `};
`

const Wrapper = styled.section `
  display: flex;
  ${(props: { type?: string }) =>
    props.type === 'vertical' &&
    styled.css `
      width: rem(300);
      flex-direction: column;
    `};
`

export {
  TotalText,
  SaveText,
  TotalWrapper,
  IncrementerWrapper,
  StyledPromoText,
  StyledPromoWrapper,
  StyledToggleFavorite,
  StyledLink,
  StyledQuantityValue,
  StyledText,
  StyledDetailedList,
  StyledRatings,
  ProductWrapper,
  ProductDetailWrapper,
  StyledBrandName,
  StyledProductName,
  PriceWrapper,
  SalePrice,
  RegularPrice,
  StyledImagePlaceholder,
  StyledProductImage,
  ImageWrapper,
  Wrapper,
}