import { styled } from '@skava/modules/___dist/view-container'
import { Link } from '@skava/modules/___dist/link-container'
// import { Link } from 'atoms/Link'
import { IncrementerWrapper } from 'src/inputs/Incrementer'
import { Button, ButtonLabel, ButtonIcon } from 'atoms/Button'
import { Heading } from '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 'molecules/Toggle'

const PrimaryButton = styled.withComponent(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;

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

  ${ButtonLabel} {
    color: #ffffff;
    text-transform: none;
  }
  ${ButtonIcon} {
    svg {
      fill: #ffffff;
    }
  }
`

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

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

  ${ButtonLabel} {
    color: #ffffff;
    text-transform: none;
  }
  ${ButtonIcon} {
    svg g{
      fill: #ffffff;
    }
  }
`

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

const StyledProductName = styled.withComponent(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.withComponent(ProductPrice).attrs({
  'data-qa': 'qa-product-price',
}) `
  display: flex;
  flex-direction: column;
  ${RegularPrice} {
    color: #000000;
    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.withComponent(ProductDescription) `
  margin: 0;
  color: #5F6C88;
  @phone-or-smaller()
  {
    font-size: 14px;
  }
`

const StyledBrandName = styled.withComponent(ProductName) `
  color: #5F6C88;
  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.withComponent(Quantity) `
  width: 100px;

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

  ${IncrementerWrapper} {
    padding: 10px;
    border: 1px solid #A6AFC1;
    border-radius: 4px;
  }
`

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

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

  ${ButtonLabel} {
    color: #159FD5;
    margin: 0;
    text-transform: none;
    font-size: 14px;
  }
`

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

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

const StyledProductImage = styled.withComponent(ProductImage).attrs({
  'data-qa': 'qa-product-image',
}) `
  ${ProductImageSection} {
    width: rem(298);
    height: rem(240);
  }
`

const StyledCheckBox = styled.withComponent(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: #2C2C2C;
    font-size: 20px;
    font-weight: 700;
  }
`

const StyledProductImageWithCaption = styled
  .withComponent(ProductImageWithCaption)
  .attrs({
    'data-qa': 'qa-product-image',
  }) `
  background: #fff;
`
const StyledLink = styled.withComponent(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: #ffffff;
  text-decoration: none;
  text-transform: capitalize;
  font-size: rem(16);

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

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

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