import React from 'react'
import { Empty } from 'atoms/Empty'
import { TextPlaceholder } from 'atoms/Placeholder'
import { ProductItem, ProductItemProps } from '../CheckoutCartBundle/ProductItem'
import { StyledImagePlaceholder, ProductDetails, BrandNamePlaceholder, ProductOptions, StyledTextPlaceholder, ProductPrice, PricePlaceholder, BaseWrapper } from '../CheckoutCartBundle/ProductItem/styled'
import { MiniCartBundleProps } from './typings'
import { CartProductImage } from './styled'

function defaultRenderCartProduct(props: MiniCartBundleProps) {
  return (
    <React.Fragment>
      <CartProductImage>
        <StyledImagePlaceholder width={112} height={90}/>
      </CartProductImage>
      <ProductDetails>
        <BrandNamePlaceholder width={130}/>
        <TextPlaceholder width={200}/>
        <ProductOptions>
          <StyledTextPlaceholder/>
          <StyledTextPlaceholder/>
        </ProductOptions>
        <ProductPrice>
          <PricePlaceholder/>
          <PricePlaceholder/>
        </ProductPrice>
      </ProductDetails>
    </React.Fragment>
  )
}

function defaultRenderCartQuantity() {
  return <Empty />
}

function defaultRenderCartPrice() {
  return <Empty />
}

function defaultRenderCartTotalPrice() {
  return <Empty />
}

function defaultRenderCartItem(props: MiniCartBundleProps) {
  const { item, index, ...remainingProps } = props
  return <ProductItem key={index} item={item} index={index} {...remainingProps}/>
}

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

export { defaultRenderCartProduct, defaultRenderCartQuantity, defaultRenderCartPrice, defaultRenderCartTotalPrice, defaultRenderCartItem, defaultCartWrapper }