import React, { SyntheticEvent } 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,
  IdentifierWrapper,
  StyledIdentifier,
  StyledBrandName,
  StyledProductName,
  StyledDetailedList,
  StyledQuantity,
  StyledQuantityValue,
  StyledPrice,
  TotalPrice,
  SavePrice,
  StyledLabel,
  StyledWrapper,
} 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,
    brandNameDataQa = 'qa-product-brand-name',
    productNameDataQa = 'qa-product-name',
  } = item
  return (
    <React.Fragment>
      <StyledBrandName
        breedType={'h4'}
        content={isSafe(brandName) && brandName}
        data-qa={brandNameDataQa}
      />
      {isSafe(name) ? (
        <StyledLink to={isSafe(navigationUrl) && navigationUrl} target="_top">
          <StyledProductName
            breedType={'h4'}
            content={name}
            data-qa={productNameDataQa}
          />
        </StyledLink>
      ) : (
        <Empty />
      )}
      <StyledDetailedList list={isArray(facets) && facets} />
      {isSafe(identifier) ? (
        <IdentifierWrapper>
          <StyledIdentifier>{wording.itemIdentifier}:</StyledIdentifier>
          <StyledIdentifier>{identifier}</StyledIdentifier>
        </IdentifierWrapper>
      ) : (
        <Empty />
      )}
    </React.Fragment>
  )
}

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

  const handleQuantityInputChange = (
    event: SyntheticEvent<HTMLInputElement>
  ) => {
    if (isFunction(onQuantityInputChange)) {
      onQuantityInputChange(event)
    }
  }
  return hasQuantity ? (
    isSafe(quantity) ? (
      <React.Fragment>
        <StyledLabel>{wording.quantity}:</StyledLabel>
        <StyledQuantityValue> {quantity}</StyledQuantityValue>
      </React.Fragment>
    ) : (
      <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) ? (
        <StyledWrapper>
          <StyledLabel>{wording.total}</StyledLabel>
          <TotalPrice>{totalPrice}</TotalPrice>
        </StyledWrapper>
      ) : (
        <Empty />
      )}
      {isSafe(savePrice) ? (
        <SavePrice>{savePriceCaption}</SavePrice>
      ) : (
        <Empty />
      )}
    </React.Fragment>
  )
}

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