import React from 'react'
import { ProductTileProps } from './typings'
import {
  ProductItemWrapper,
  ProductImage,
  ProductBrand,
  StyledProductTitle,
  ProductDescription,
  ProductPricePanel,
  RegularPrice,
  SalePrice,
  StyledRatings,
  ProductInfoWrapper,
} from './styled'

function defaultRenderImage(props: ProductTileProps) {
  const { imageUrl, imageHeight, isDisableProductImage } = props
  return (
    <ProductImage
      src={imageUrl}
      imageHeight={imageHeight}
      isDisableProductImage={isDisableProductImage}
    />
  )
}

function defaultRenderBrandName(props: ProductTileProps) {
  const { brandName } = props
  return <ProductBrand content={brandName} />
}

function defaultRenderDescription(props: ProductTileProps) {
  const { productDescription } = props
  return <ProductDescription content={productDescription} />
}

function defaultRenderTitle(props: ProductTileProps) {
  const { productTitle } = props
  return <StyledProductTitle content={productTitle} />
}

function defaultRenderPrice(props: ProductTileProps) {
  const { regularPrice, salePrice } = props
  return (
    <ProductPricePanel>
      <SalePrice content={salePrice} />
      <RegularPrice content={regularPrice} />
    </ProductPricePanel>
  )
}

function defaultRenderRatings(props: ProductTileProps) {
  const { reviewRatings, totalReviews } = props
  return <StyledRatings value={reviewRatings} count={totalReviews} />
}

const renderViewType = (props: ProductTileProps) => {
  const {
    renderBrandName,
    renderTitle,
    renderDescription,
    renderPrice,
    renderRatings,
    ...remainingProps
  } = props

  switch (props.viewType) {
    case 'type2':
      // Show tittle first
      return (
        <React.Fragment>
          {renderTitle(remainingProps)}
          {renderDescription(remainingProps)}
          {renderBrandName(remainingProps)}
          {renderPrice(remainingProps)}
          {renderRatings(remainingProps)}
        </React.Fragment>
      )
    case 'type3':
      // Show price first
      return (
        <React.Fragment>
          {renderPrice(remainingProps)}
          {renderTitle(remainingProps)}
          {renderDescription(remainingProps)}
          {renderBrandName(remainingProps)}
          {renderRatings(remainingProps)}
        </React.Fragment>
      )
    case 'type4':
      // Show rating first
      return (
        <React.Fragment>
          {renderRatings(remainingProps)}
          {renderPrice(remainingProps)}
          {renderTitle(remainingProps)}
          {renderDescription(remainingProps)}
          {renderBrandName(remainingProps)}
        </React.Fragment>
      )
    case 'type1':
    // Show brand name first
    default:
      return (
        <React.Fragment>
          {renderBrandName(remainingProps)}
          {renderTitle(remainingProps)}
          {renderDescription(remainingProps)}
          {renderPrice(remainingProps)}
          {renderRatings(remainingProps)}
        </React.Fragment>
      )
  }
}

function defaultRenderProductInformation(props: ProductTileProps) {
  const { isDisableProductInformation } = props
  const view = renderViewType(props)
  return (
    <ProductInfoWrapper
      isDisableProductInformation={isDisableProductInformation}
    >
      {view}
    </ProductInfoWrapper>
  )
}

function defaultRenderBox(props: ProductTileProps) {
  const { renderImage, renderProductInformation, ...remainingProps } = props
  const productItem = props
  return (
    <React.Fragment>
      {renderImage(productItem)}
      {renderProductInformation(remainingProps)}
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: ProductTileProps) {
  const { className, dataQa, children } = props
  const { imageWidth } = props
  return (
    <ProductItemWrapper
      className={className}
      data-qa={dataQa}
      imageWidth={imageWidth}
    >
      {children}
    </ProductItemWrapper>
  )
}

export {
  defaultRenderImage,
  defaultRenderTitle,
  defaultRenderBrandName,
  defaultRenderDescription,
  defaultRenderPrice,
  defaultRenderRatings,
  defaultRenderBox,
  defaultRenderWrapper,
  defaultRenderProductInformation,
}