import { styled } from 'styleh-components'
import { Link } from '@skava/ui/dist/components/atoms/Link'
import { IncrementerWrapper } from '@skava/ui/dist/inputs/Incrementer'
import {
  Button,
  ButtonText,
  ButtonIcon,
} from '@skava/ui/dist/components/atoms/Button'
import { Heading } from '@skava/ui/dist/components/atoms/Text/Heading'
import { Quantity, StyledTitle } from 'presets/Quantity'
import { Ratings } from 'presets/Ratings'
import { RegularPrice, SalePrice } from 'presets/ProductPieces/ProductPrice'
import {
  ProductDescription,
  ProductPrice,
  ProductName,
  ProductIdentifier,
  ProductImage,
  ProductImageSection,
  ProductImageWithCaption,
} from 'presets/ProductPieces'
import {
  LabelElement,
  ValueElement,
} from 'presets/ProductPieces/ProductIdentifier'
import { LinkButton } from 'presets/Buttons'
import {
  StyledLabel,
  Toggle,
  StyledCheckboxIcon,
} from '@skava/ui/dist/components/molecules/Toggle'
import { FigureCaption } from '@skava/ui/dist/components/molecules/Figure'

const PrimaryButton = styled(Button).attrs({
  'data-qa': 'qa-addcart',
}) `
  background-color: #14a0d5;
  border: none;
  width: rem(180);
  height: rem(44);
  border-radius: 4px;
  margin-right: 16px;
  padding: 0;

  ${props =>
    props.isAddToCartDisabled &&
    styled.css `
      opacity: 0.5;
      pointer-events: none;
    `}

  @media (max-width: 767px) {
    width: 100%;
    margin-bottom: 16px;
  }

  ${ButtonText} {
    color: var(--color-pure-white);
    text-transform: none;
  }
  ${ButtonIcon} {
    svg {
      fill: var(--color-pure-white);
    }
  }
`

const SecondaryButton = styled(Button).attrs({
  'data-qa': 'qa-save',
}) `
  background-color: var(--color-dark-grey);
  border: none;
  width: rem(180);
  height: rem(44);
  border-radius: 4px;
  padding: 0;

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

  ${ButtonText} {
    color: var(--color-pure-white);
    text-transform: none;
  }
  ${ButtonIcon} {
    svg g {
      fill: var(--color-pure-white);
    }
  }
`

const StyledHeading = styled(Heading).attrs({
  'data-qa': 'qa-collection-product-name',
}) `
  color: var(--color-black);
  text-transform: capitalize;
  margin: 0;
  margin-bottom: 8px;
  font-size: 20px;
  @phone-or-smaller() {
    font-size: 18px;
  }
`

const StyledProductName = styled(ProductName).attrs({
  'data-qa': 'qa-product-name',
}) `
  font-size: 28px;
  font-weight: 500;
  margin: 8px 0 12px;

  @phone-or-smaller() {
    margin: 4px 0 12px 0;
    font-size: 20px;
  }
`

const StyledProductPrice = styled(ProductPrice).attrs({
  'data-qa': 'qa-product-price',
}) `
  display: flex;
  flex-direction: column;
  ${RegularPrice} {
    color: var(--color-black);
    order: 0;
    font-size: 16px;
    @phone-or-smaller() {
      font-size: 14px;
    }
  }
  ${SalePrice} {
    color: #ea2227;
    font-size: 20px;
    font-weight: 700;
    order: 1;
    @phone-or-smaller() {
      font-size: 16px;
    }
  }
`

const StyledProductDescription = styled(ProductDescription) `
  margin: 0;
  color: var(--color-dark-grey);
  @phone-or-smaller() {
    font-size: 14px;
  }
`

const StyledBrandName = styled(ProductName) `
  color: var(--color-dark-grey);
  font-weight: 500;
  margin: 20px 0 8px;
  text-transform: uppercase;
  font-size: 18px;

  @phone-or-smaller() {
    margin: 14px 0 4px 0;
    font-size: 16px;
  }
`

const StyledQuantity = styled(Quantity) `
  width: auto;

  ${StyledTitle} {
    margin: 0;
    margin-bottom: rem(8);
    font-size: 20px;
    @phone-or-smaller() {
      font-size: 16px;
    }
  }

  ${IncrementerWrapper} {
    padding: 10px;
    border: 1px solid var(--color-light-grey);
    border-radius: 4px;
    button svg {
      height: rem(23);
    }
  }
`

const InventoryContent = styled.span `
  display: flex;
  height: 44px;
  align-self: flex-end;
  align-items: center;
  font-weight: 500;
  text-transform: capitalize;
  margin-left: rem(24);

  ${props =>
    props.color !== '' &&
    styled.css `
      color: ${props.color};
    `}

  @tablet-or-smaller() {
    margin-left: rem(18);
  }

  @phone-or-smaller() {
    height: rem(42);
    margin-left: rem(24);
  }
`

const StyledRatingTitle = styled.div `
  font-size: rem(20);
  font-weight: 700;
`

const StyledWriteReview = styled(LinkButton).attrs({
  'data-qa': 'qa-write-review',
}) `
  margin: 0;
  padding: 0;
  justify-content: flex-start;

  ${ButtonText} {
    color: var(--color-blue);
    margin: 0;
    text-transform: none;
    font-size: 14px;
  }
`

const StyledRating = styled(Ratings).attrs({
  'data-qa': 'qa-product-rating',
}) `
  padding: 10px 0 6px 0;
`

const StyledProductIdentifier = styled(ProductIdentifier) `
  color: var(--color-dark-grey);
  font-size: 16px;
  margin-bottom: 4px;
  @phone-or-smaller() {
    font-size: 14px;
  }
  ${LabelElement} {
    text-transform: uppercase;
  }
  ${ValueElement} {
    margin-left: 5px;
  }
`

const StyledCheckBox = styled(Toggle).attrs({
  'data-qa': 'qa-add-item',
}) `
  width: rem(180);
  height: rem(44);
  cursor: pointer;

  ${StyledCheckboxIcon} {
    border-radius: rem(4);
    &:hover .checkbox-borderfill {
      fill: ${props => props.bgColor};
    }
    .checkbox-tickfill {
      transform: scale(1.4, 1.4) translate(22px, 34px);
    }
  }
  ${StyledLabel} {
    color: var(--color-black);
    font-size: 20px;
    font-weight: 700;
  }
`
const StyledProductImage = styled(ProductImage).attrs({
  'data-qa': 'qa-product-image',
}) `
  ${ProductImageSection} {
    height: rem(240);
    display: flex;
    align-items: center;

    @tablet-or-smaller() {
      height: rem(184);
    }

    @phone-or-smaller() {
      height: rem(234);
    }
  }
`
const StyledProductImageWithCaption = styled(ProductImageWithCaption).attrs({
  'data-qa': 'qa-product-image',
}) `
  background: var(--color-pure-white);

  ${FigureCaption} {
    &:first-letter {
      text-transform: capitalize;
    }
  }
`
const StyledLink = styled(Link).attrs({
  'data-qa': 'qa-view-bundle',
}) `
  width: rem(180);
  height: rem(44);
  border-radius: rem(4);
  margin-right: rem(16);
  background-color: #14a0d5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-pure-white);
  text-decoration: none;
  text-transform: capitalize;
  font-size: rem(16);

  @media (max-width: 767px) {
    width: 100%;
    margin-bottom: 16px;
  }
`

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

  img {
    position: relative;
  }
`

export {
  PrimaryButton,
  SecondaryButton,
  StyledHeading,
  StyledProductName,
  StyledProductPrice,
  StyledProductDescription,
  StyledBrandName,
  StyledQuantity,
  InventoryContent,
  StyledRatingTitle,
  StyledWriteReview,
  StyledRating,
  StyledProductIdentifier,
  StyledProductImage,
  StyledCheckBox,
  StyledProductImageWithCaption,
  StyledLink,
  ProductNavigationLink,
}