import React from 'react'
import { isFunction, isSafe } from 'exotic'
import { wording } from 'src/words'
import { Empty } from 'atoms/Empty'
import {
  StyledTotalPrice,
  SavePrice,
  TotalPrice,
  StyledItemPrice,
  StyledQuantity,
  StyledDetailedList,
  StyledProductName,
  StyledBrandName,
  StyledImageLink,
  StyledLink,
  StyledProductDetails,
  StyledImageWithCaption,
  StyledProduct,
} from './styled'
import { ProductItemProps } from './typings'

// renderButton
function defaultRenderCheckoutButton(props: ProductItemProps) {
  return ''
}

// renderTotalPrice
function defaultRenderCheckoutTotalPrice(props: ProductItemProps) {
  const { item } = props
  const { totalPrice, savePrice } = item
  const savePriceCaption = wording.youSave + ' ' + savePrice
  return (
    <StyledTotalPrice>
      {isSafe(totalPrice) ? <TotalPrice>{totalPrice}</TotalPrice> : <Empty />}
      {isSafe(savePrice) ? <SavePrice>{savePriceCaption}</SavePrice> : <Empty />}
    </StyledTotalPrice>
  )
}

// renderItemPrice
function defaultRenderCheckoutPrice(props: ProductItemProps) {
  const { item } = props
  const { salePrice, regPrice } = item
  return (
    <StyledItemPrice salePrice={salePrice} regularPrice={regPrice} />
  )
}

// renderQuantity
function defaultRenderCheckoutQuantity(props: ProductItemProps) {
  const { onQuantityInputChange } = props

  const handleQuantityInputChange = changeArgs => {
    console.log('[handleQuantityInputChange]', changeArgs)
    if (isFunction(onQuantityInputChange)) {
      onQuantityInputChange(changeArgs)
    }
  }
  return <StyledQuantity defaultValue={1} isHeader={false} onChange={handleQuantityInputChange} />
}

// renderProduct
function defaultRenderCheckoutProduct(props: ProductItemProps) {
  const { item, index, productCount } = props
  const { image, brandName, name, options, 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 (
    <StyledProduct>
      <StyledImageLink to={navigationUrl} target="_top">
        <StyledImageWithCaption
          src={image.value}
          caption={caption}
          captionColor={captionBgColor}
        />
      </StyledImageLink>
      <StyledProductDetails>
        <StyledBrandName breedType="h4" content={brandName} />
        <StyledLink to={navigationUrl} target="_top">
          <StyledProductName breedType="h4" content={name} />
        </StyledLink>
        <StyledDetailedList list={options} />
      </StyledProductDetails>
    </StyledProduct>
  )
}

export {
  defaultRenderCheckoutButton,
  defaultRenderCheckoutTotalPrice,
  defaultRenderCheckoutPrice,
  defaultRenderCheckoutQuantity,
  defaultRenderCheckoutProduct,
}