import React from 'react'
import { TextPlaceholder } from 'atoms/Placeholder'
import { ProductItemProps } from './typings'
import {
  StyledItemText,
  StyledRectanglePlaceholder,
  StyledTextPlaceholder,
  ProductOptions,
  BrandNamePlaceholder,
  ProductDetails,
  StyledImage,
  StyledImagePlaceholder,
  TotalPriceWrapper,
  PriceWrapper,
  QuantityWrapper,
  ProductWrapper,
  Wrapper,
} from './styled'

function defaultRenderTotalPrice(props: ProductItemProps) {
  return (
    <React.Fragment>
      <StyledTextPlaceholder />
      <StyledTextPlaceholder />
    </React.Fragment>
  )
}

function defaultRenderPrice(props: ProductItemProps) {
  return (
    <React.Fragment>
      <StyledItemText />
      <StyledItemText />
    </React.Fragment>
  )
}

function defaultRenderQuantity(props: ProductItemProps) {
  return <StyledRectanglePlaceholder />
}

function defaultRenderProductDetails(props: ProductItemProps) {
  return (
    <ProductDetails>
      <BrandNamePlaceholder width={'85%'} />
      <TextPlaceholder width={'95%'} height={20} />
      <ProductOptions>
        <StyledTextPlaceholder />
        <StyledTextPlaceholder />
        <StyledTextPlaceholder />
      </ProductOptions>
    </ProductDetails>
  )
}

function defaultRenderImage(props: ProductItemProps) {
  return (
    <StyledImage>
      <StyledImagePlaceholder width={112} height={90} />
    </StyledImage>
  )
}

function defaultRenderBox(props: ProductItemProps) {
  const {
    renderImage,
    renderProductDetails,
    renderQuantity,
    renderPrice,
    renderTotalPrice,
    ...remainingProps
  } = props
  return (
    <React.Fragment>
      <ProductWrapper>
        {renderImage(remainingProps)}
        {renderProductDetails(remainingProps)}
      </ProductWrapper>
      <QuantityWrapper>{renderQuantity(remainingProps)}</QuantityWrapper>
      <PriceWrapper>{renderPrice(remainingProps)}</PriceWrapper>
      <TotalPriceWrapper>{renderTotalPrice(remainingProps)}</TotalPriceWrapper>
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: ProductItemProps) {
  const { className, children } = props
  const passThroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa'],
  })
  return <Wrapper {...passThroughProps}>{children}</Wrapper>
}

export {
  defaultRenderImage,
  defaultRenderProductDetails,
  defaultRenderQuantity,
  defaultRenderPrice,
  defaultRenderTotalPrice,
  defaultRenderBox,
  defaultRenderWrapper,
}