import React from 'react'
import { isFunction, isSafe, isObj, isArray } from 'exotic'
import { Empty } from 'atoms/Empty'
import { wording } from 'src/words'
import { ProductItemProps } from './typings'
import {
  StyledImageLink,
  StyledLink,
  StyledImage,
  StyledProductDetails,
  IdentifierWrapper,
  StyledIdentifier,
  StyledBrandName,
  StyledProductName,
  StyledDetailedList,
  StyledQuantity,
  StyledQuantityValue,
  StyledPrice,
  TotalPrice,
  SavePrice,
} from './styled'

function defaultRenderImage(props: ProductItemProps) {
  const { item } = props
  const { image, navigationUrl } = item
  return isObj(image) && isSafe(image.value)
    ? (
      < StyledImageLink to={isSafe(navigationUrl) && navigationUrl} target="_top" >
        <StyledImage src={image.value} />
      </StyledImageLink >
    )
    : <Empty />
}

function defaultRenderProductDetails(props: ProductItemProps) {
  const { item } = props
  const { brandName, name, facets, identifier, navigationUrl } = item
  return (
    <StyledProductDetails>
      <StyledBrandName breedType={'h4'} content={isSafe(brandName) && brandName} />
      {isSafe(name)
        ?
        <StyledLink to={isSafe(navigationUrl) && navigationUrl} target="_top">
          <StyledProductName breedType={'h4'} content={name} />
        </StyledLink>
        :
        <Empty />
      }
      <StyledDetailedList list={isArray(facets) && facets} />
      {isSafe(identifier)
        ?
        <IdentifierWrapper>
          <StyledIdentifier>{wording.itemIdentifier}:</StyledIdentifier>
          <StyledIdentifier>{identifier}</StyledIdentifier>
        </IdentifierWrapper>
        :
        <Empty />
      }
    </StyledProductDetails>
  )
}

function defaultRenderQuantity(props: ProductItemProps) {
  const { item, onQuantityInputChange } = props
  const { hasQuantity, quantity } = item

  const handleQuantityInputChange = (event: Event) => {
    if (isFunction(onQuantityInputChange)) {
      onQuantityInputChange(event)
    }
  }
  return (
    hasQuantity
      ? isSafe(quantity) ? < StyledQuantityValue > {quantity}</StyledQuantityValue > : <Empty />
      : <StyledQuantity defaultValue={1} isHeader={false} onChange={handleQuantityInputChange} />
  )
}

function defaultRenderPrice(props: ProductItemProps) {
  const { item } = props
  const { salePrice, regPrice } = item
  return isSafe(regPrice) ? <StyledPrice salePrice={isSafe(salePrice) && salePrice} regularPrice={regPrice} /> : <Empty />
}

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

export {
  defaultRenderImage,
  defaultRenderProductDetails,
  defaultRenderQuantity,
  defaultRenderPrice,
  defaultRenderTotalPrice,
}