import React from 'react'
import { TextPlaceholder } from 'atoms/Placeholder'
import { ProductItemProps } from './typings'
import {
  ProductBox,
  CheckoutProductImage,
  StyledImagePlaceholder,
  ProductDetails,
  BrandNamePlaceholder,
  ProductOptions,
  StyledTextPlaceholder,
  QuantityBox,
  StyledRectanglePlaceholder,
  ItemPriceBox,
  StyledItemText,
  TotalPriceBox,
  Wrapper,
} from './styled'

function defaultRenderCheckoutProduct(props: ProductItemProps) {
  return (
    <ProductBox>
      <CheckoutProductImage>
        <StyledImagePlaceholder width={112} height={90} />
      </CheckoutProductImage>
      <ProductDetails>
        <BrandNamePlaceholder width={'85%'} />
        <TextPlaceholder width={'95%'} height={20} />
        <ProductOptions>
          <StyledTextPlaceholder />
          <StyledTextPlaceholder />
          <StyledTextPlaceholder />
        </ProductOptions>
      </ProductDetails>
    </ProductBox>
  )
}

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

function defaultRenderCheckoutPrice(props: ProductItemProps) {
  return (
    <ItemPriceBox>
      <StyledItemText />
      <StyledItemText />
    </ItemPriceBox>
  )
}

function defaultRenderCheckoutTotalPrice(props: ProductItemProps) {
  return (
    <TotalPriceBox>
      <StyledTextPlaceholder />
      <StyledTextPlaceholder />
    </TotalPriceBox>
  )
}

function defaultRenderBox(props: ProductItemProps) {
  const {
    renderProduct,
    renderQuantity,
    renderPrice,
    renderTotalPrice,
    ...remainingProps
  } = props
  const product = renderProduct(remainingProps)
  const quantity = renderQuantity(remainingProps)
  const price = renderPrice(remainingProps)
  const totalPrice = renderTotalPrice(remainingProps)
  return (
    <React.Fragment>
      {product}
      {quantity}
      {price}
      {totalPrice}
    </React.Fragment>
  )
}

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

export {
  defaultRenderCheckoutProduct,
  defaultRenderCheckoutQuantity,
  defaultRenderCheckoutPrice,
  defaultRenderCheckoutTotalPrice,
  defaultRenderBox,
  defaultRenderWrapper,
}