import React from 'react'
import { ProductItemProps } from './typings'
import { TextPlaceholder, ParagraphPlaceholder, RectanglePlaceholder, SquarePlaceholder } from 'atoms/Placeholder'
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>
      <Quantity>{quantityView}</Quantity>
      <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,
}