import React from 'react'
import { TextPlaceholder, ImagePlaceholder } from 'atoms/Placeholder'
import { ProductItemProps } from './typings'
import {
  StyledItemText,
  StyledRectanglePlaceholder,
  StyledTextPlaceholder,
  ProductOptions,
  BrandNamePlaceholder,
  ProductDetails,
  StyledImageWrapper,
  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 (
    <React.Fragment>
      <BrandNamePlaceholder width={'85%'} />
      <TextPlaceholder width={'95%'} height={20} />
      <ProductOptions>
        <StyledTextPlaceholder />
        <StyledTextPlaceholder />
        <StyledTextPlaceholder />
      </ProductOptions>
    </React.Fragment>
  )
}

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

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