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,
} from '../CheckoutCartBundle/ProductItem/styled'
import { MiniCartBundleProps } from './typings'
import { CartProductImage, StyledBaseWrapper } 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 <StyledBaseWrapper className={className}>{children}</StyledBaseWrapper>
}

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