import React from 'react'
import { Empty } from 'atoms/Empty'
import {
  TextPlaceholder,
  ParagraphPlaceholder,
  RectanglePlaceholder,
} from 'atoms/Placeholder'
import { ProductItemProps } from './typings'
import {
  ProductItemContainer,
  ProductItemWrapper,
  ProductSection,
  ProductOptions,
  Description,
  Button,
  Quantity,
  StyledTextPlaceholder,
  ProductDetailsPlaceholder,
  StyledRectanglePlaceholder,
  StyledColorPlaceholder,
  ProductOptionsWrapper,
  Rating,
} from './styled'

function defaultRenderProduct(props: ProductItemProps) {
  return (
    <React.Fragment>
      <StyledRectanglePlaceholder height={250} />
      <ProductDetailsPlaceholder width={220} height={26} />
      <ProductDetailsPlaceholder width={150} height={18} />
      <ProductDetailsPlaceholder width={50} height={14} />
      <ProductDetailsPlaceholder width={70} height={16} />
    </React.Fragment>
  )
}

function defaultRenderOptions(props: ProductItemProps) {
  return (
    <React.Fragment>
      <ProductOptionsWrapper>
        <StyledTextPlaceholder width={150} height={16} />
        <StyledColorPlaceholder width={30} height={30} />
        <StyledColorPlaceholder width={30} height={30} />
        <StyledColorPlaceholder width={30} height={30} />
        <StyledColorPlaceholder width={30} height={30} />
      </ProductOptionsWrapper>
      <ProductOptionsWrapper>
        <StyledTextPlaceholder width={150} height={16} />
        <StyledColorPlaceholder width={48} height={48} />
        <StyledColorPlaceholder width={48} height={48} />
        <StyledColorPlaceholder width={48} height={48} />
        <StyledColorPlaceholder width={48} height={48} />
      </ProductOptionsWrapper>
      <ProductOptionsWrapper>
        <StyledTextPlaceholder width={150} height={16} />
        <StyledColorPlaceholder width={70} height={48} />
        <StyledColorPlaceholder width={70} height={48} />
        <StyledColorPlaceholder width={70} height={48} />
        <StyledColorPlaceholder width={70} height={48} />
      </ProductOptionsWrapper>
    </React.Fragment>
  )
}

function defaultRenderDescription(props: ProductItemProps) {
  return (
    <React.Fragment>
      <StyledTextPlaceholder width={150} height={16} />
      <ParagraphPlaceholder itemHeight={10} lineSpacing={10} rows={4} />
    </React.Fragment>
  )
}

function defaultRenderRating(props: ProductItemProps) {
  return (
    <React.Fragment>
      <StyledTextPlaceholder width={110} height={16} />
      <RectanglePlaceholder className="rating" width={150} height={40} />
      <StyledTextPlaceholder width={150} height={16} />
    </React.Fragment>
  )
}

function defaultRenderQuantity(props: ProductItemProps) {
  return (
    <React.Fragment>
      <StyledTextPlaceholder width={110} height={16} />
      <RectanglePlaceholder className="drop-down" width={150} height={40} />
    </React.Fragment>
  )
}

function defaultRenderButton(props: ProductItemProps) {
  return <TextPlaceholder width={200} height={44} />
}

function defaultRenderBox(props: ProductItemProps) {
  const {
    renderProduct,
    renderOptions,
    renderDescription,
    renderQuantity,
    renderButton,
    renderRating,
    ...remainingProps
  } = props
  const productView = renderProduct(remainingProps)
  const optionsView = renderOptions(remainingProps)
  const descriptionView = renderDescription(remainingProps)
  const quantityView = renderQuantity(remainingProps)
  const ratingView = renderRating(remainingProps)
  const buttonView = renderButton(remainingProps)
  return (
    <ProductItemContainer>
      <ProductSection>{productView}</ProductSection>
      <ProductOptions>{optionsView}</ProductOptions>
      <Description>{descriptionView}</Description>
      <Rating>{ratingView}</Rating>
      {quantityView ? <Quantity>{quantityView}</Quantity> : <Empty />}
      <Button>{buttonView}</Button>
    </ProductItemContainer>
  )
}

function defaultRenderWrapper(props: ProductItemProps) {
  const { className, children } = props
  return (
    <ProductItemWrapper className={className}>{children}</ProductItemWrapper>
  )
}

export {
  defaultRenderProduct,
  defaultRenderOptions,
  defaultRenderDescription,
  defaultRenderRating,
  defaultRenderQuantity,
  defaultRenderButton,
  defaultRenderBox,
  defaultRenderWrapper,
}