import React from 'react'
import { toUrlWithProtocol } from '@skava/utils'
import { toBoolean, fromIshToNumber, fromIshToString } from 'exotic'
import Empty from '@skava/ui/dist/components/atoms/Empty'
import {
  convertAsPrice,
} from 'presets/Studio/deps'
import { ProductTileProps } from './typings'
import {
  ProductItemWrapper,
  ProductImage,
  ProductBrand,
  StyledProductTitle,
  ProductDescription,
  ProductPricePanel,
  PromoLabel,
  RegularPrice,
  SalePrice,
  StyledRatings,
  ProductInfoWrapper,
} from './styled'

function defaultRenderImage(props: ProductTileProps) {
  const { imageUrl, productTitle } = props
  const placeholderImageUrl = 'https://raderain.sirv.com/placholders/image_icon.png'
  const productImageUrl = fromIshToString(imageUrl)
  const validProductImageUrl = toUrlWithProtocol(productImageUrl) || placeholderImageUrl
  return <ProductImage src={validProductImageUrl} alt={productTitle} />
}

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

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

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

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

function defaultRenderPromo(props: ProductTileProps) {
  const { promoDetails } = props
  const validPromoDetails = fromIshToString(promoDetails)
  return <PromoLabel content={validPromoDetails} />
}

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

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

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

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

function defaultRenderBox(props: ProductTileProps) {
  const {
    isDisableProductImage,
    isDisableProductInformation,
    renderImage,
    renderProductInformation,
    ...remainingProps
  } = props
  const shouldDisableImage = toBoolean(isDisableProductImage)
  const shouldDisableInfo = toBoolean(isDisableProductInformation)

  return (
    <React.Fragment>
      {shouldDisableImage ? <Empty /> : renderImage(remainingProps)}
      {shouldDisableInfo ? <Empty /> : renderProductInformation(remainingProps)}
    </React.Fragment>
  )
}

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

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