import React from 'react'
import { Empty } from 'atoms/Empty'
import { wording } from 'src/words'
import {
  StyledProduct,
  StyledImageWithCaption,
  StyledItemPrice,
} from '../CheckoutCartBundle/ProductItem/styled'
import {
  StyledImage,
  ItemPrice,
  ProductDetails,
  ProductOptions,
  ProductName,
  BrandName,
} from './styled'
import { MiniCartBundleProps, MiniCartProductItemProps } from './typings'

function defaultRenderCartButton() {
  return <Empty />
}

function defaultRenderCartProduct(props: MiniCartProductItemProps) {
  const { item, index, productCount } = props
  const {
    image,
    brandName,
    name,
    options,
    salePrice,
    regPrice,
    isBundleSubProduct,
    hasAddon,
  } = item
  const captionBgColor = isBundleSubProduct && hasAddon ? '#EA7B0A' : '#195FBF'
  const bundleCaption = `${wording.item} ${index +
    1} of ${productCount}`
  const caption = isBundleSubProduct && hasAddon ? wording.addon : bundleCaption


  return (
    <React.Fragment>
      <StyledImage >
        <StyledImageWithCaption
          src={image.value}
          caption={caption}
          captionColor={captionBgColor}
        />
      </StyledImage>
      <ProductDetails>
        <BrandName breedType="h4" content={brandName} />
        <ProductName breedType="h4" content={name} />
        <ProductOptions list={options} />
        <ItemPrice saleprice={salePrice} regularprice={regPrice} />
      </ProductDetails>
    </React.Fragment>
  )
}
export { defaultRenderCartProduct, defaultRenderCartButton }