import React from 'react'
import { TextPlaceholder } from 'atoms/Placeholder'
import { ProductItemProps } from './typings'
import { ProductBox, CheckoutProductImage, StyledImagePlaceholder, ProductDetails, BrandNamePlaceholder, ProductOptions, StyledTextPlaceholder, PricePlaceholder, 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 }