import React from 'react'
import { Empty } from '@skava/ui/dist/components/atoms/Empty'
import { wording } from '@skava/ui/dist/words'
import {
  StyledImageWithCaption,
} from '../CheckoutCartBundle/ProductItem/styled'
import {
  ItemPrice,
  ProductDetails,
  ProductOptions,
  ProductName,
  BrandName,
  StyledImageLink,
  StyledLink,
} 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,
    navigationUrl,
  } = 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>
      <StyledImageLink to={navigationUrl} target="_top">
        <StyledImageWithCaption
          src={image.value}
          caption={caption}
          captionColor={captionBgColor}
        />
      </StyledImageLink>
      <ProductDetails>
        <BrandName breedType="h4" content={brandName} />
        <StyledLink to={navigationUrl} target="_top">
          <ProductName breedType="h4" content={name} />
        </StyledLink>
        <ProductOptions list={options} />
        <ItemPrice salePrice={salePrice} regularPrice={regPrice} />
      </ProductDetails>
    </React.Fragment>
  )
}
export { defaultRenderCartProduct, defaultRenderCartButton }