import React from 'react'
import { isFunction, isSafe } from 'exotic'
import { wording } from 'src/words'
import { Empty } from 'atoms/Empty'
import {
  ProductImage,
  ProductDescription,
  ProductImageWithCaption,
} from 'presets/ProductPieces'
import { SwatchList } from 'presets/SwatchList'
import { ProductItemProps } from './typings'
import {
  StyledHeading,
  StyledBrandName,
  StyledProductName,
  StyledProductPrice,
  StyledQuantity,
  StyledRatingTitle,
  StyledWriteReview,
  StyledRating,
  StyledProductImage,
  StyledProductIdentifier,
  StyledProductDescription,
  PrimaryButton,
  SecondaryButton,
  StyledCheckBox,
  StyledProductImageWithCaption,
  StyledLink,
  ProductNavigationLink,
} from './styled'

function defaultRenderProduct(props: ProductItemProps) {
  const { item, index, productCount } = props
  const {
    name,
    brandName,
    salePrice,
    regPrice,
    image,
    isBundleSubProduct,
    hasAddon,
    navigationUrl,
  } = item
  const value = isSafe(image)
    ? isSafe(image.value)
      ? image.value
      : undefined
    : undefined

  const captionColor = isBundleSubProduct && hasAddon ? '#ea7b0a' : '#195fbf'
  const bundleCaption = `${wording.item} ${index + 1} of ${productCount}`
  const caption = isBundleSubProduct && hasAddon ? wording.addon : bundleCaption

  const imageView = isBundleSubProduct ? (
    <StyledProductImageWithCaption
      src={value}
      alt={name}
      caption={caption}
      captionColor={captionColor}
    />
  ) : (
    <StyledProductImage src={value} alt={name} />
  )

  return (
    <React.Fragment>
      <ProductNavigationLink to={navigationUrl}>
        {imageView}
      </ProductNavigationLink>
      <StyledBrandName breedType="h4" content={brandName} />
      <ProductNavigationLink to={navigationUrl}>
        <StyledProductName content={name} breedType="h2" />
      </ProductNavigationLink>
      <StyledProductPrice saleprice={salePrice} regularprice={regPrice} />
    </React.Fragment>
  )
}

function defaultRenderOptions(props: ProductItemProps) {
  // return 'Preset/defaultRenderOptions'
  // @example : This renderProp should be overriden for rendering ProductOptions anyway!
  return (
    <SwatchList
      list={[
        { isSelected: true, label: 'Regular', value: 'regular' },
        { label: 'Medium', value: 'medium' },
      ]}
      title={'Size'}
    />
  )
}

function defaultRenderDescription(props: ProductItemProps) {
  const { item } = props
  const { description, identifier } = item
  return (
    <React.Fragment>
      <StyledHeading breedType="h3" content={wording.productDetails} />
      {isSafe(identifier) ? (
        <StyledProductIdentifier label={'Product ID'} value={identifier} />
      ) : (
        <Empty />
      )}
      {isSafe(description) ? (
        <StyledProductDescription content={description} />
      ) : (
        <Empty />
      )}
    </React.Fragment>
  )
}

function defaultRenderRating(props: ProductItemProps) {
  const { item, onWriteReviewClick } = props
  const { reviewrating } = item
  const ratings = isSafe(reviewrating)
    ? isSafe(reviewrating.ratings)
      ? reviewrating.ratings
      : undefined
    : undefined
  const reviewcount = isSafe(reviewrating)
    ? isSafe(reviewrating.reviewcount)
      ? reviewrating.reviewcount
      : undefined
    : undefined

  const handleWriteReviewClick = event => {
    if (isFunction(onWriteReviewClick)) {
      const changeArgs = { event }
      onWriteReviewClick(changeArgs)
    }
  }

  return (
    <React.Fragment>
      <StyledRatingTitle>{wording.rating}</StyledRatingTitle>
      <StyledRating
        fillColor="#000000"
        defaultColor="#ffffff"
        shouldShowCount
        starRating={ratings}
        width={20}
        starGap={5}
        isUserCount={true}
        userRating={reviewcount}
      />
      <StyledWriteReview
        text={wording.writeReview}
        onClick={handleWriteReviewClick}
      />
    </React.Fragment>
  )
}

function defaultRenderQuantity(props: ProductItemProps) {
  const { item, onQuantityInputChange } = props
  const { hasAddon, isBundleSubProduct, isCollectionSubProduct } = item
  const isButton = (isBundleSubProduct && hasAddon) || isCollectionSubProduct

  const handleQuantityInputChange = changeArgs => {
    if (isFunction(onQuantityInputChange)) {
      onQuantityInputChange(changeArgs)
    }
  }

  const view = isButton && (
    <React.Fragment>
      <StyledQuantity
        content={wording.quantity}
        defaultValue={1}
        onChange={handleQuantityInputChange}
      />
    </React.Fragment>
  )

  return view
}

function defaultRenderButton(props: ProductItemProps) {
  const {
    item,
    onCheckBoxInputChange,
    onPrimaryButtonClick,
    onSecondaryButtonClick,
  } = props
  const {
    isCollectionSubProduct,
    isBundleSubProduct,
    hasAddon,
    isBundle,
    viewBundleUrl,
  } = item

  const handleCheckboxInputChange = args => {
    if (isFunction(onCheckBoxInputChange)) {
      const changeArgs = { isSelected: args.isSelected }
      onCheckBoxInputChange(changeArgs)
    }
  }

  const handlePrimaryButtonClick = event => {
    if (isFunction(onPrimaryButtonClick)) {
      const changeArgs = { event }
      onPrimaryButtonClick(changeArgs)
    }
  }

  const handleSecondaryButtonClick = event => {
    if (isFunction(onSecondaryButtonClick)) {
      const changeArgs = { event }
      onSecondaryButtonClick(changeArgs)
    }
  }

  if ((isBundleSubProduct && hasAddon) || isCollectionSubProduct) {
    const primaryView = isCollectionSubProduct ? (
      isBundle ? (
        <StyledLink
          text={wording.viewBundle}
          to={viewBundleUrl}
          target="_top"
        />
      ) : (
        <PrimaryButton
          breedType="icon-with-text"
          iconType="cart"
          text={wording.addToCart}
          onClick={handlePrimaryButtonClick}
        />
      )
    ) : (
      <StyledCheckBox
        bgColor={'#159fd5'}
        borderColor={'#a6afc1'}
        tickColor={'#ffffff'}
        iconType={'checkbox'}
        label={wording.addItem}
        onToggle={handleCheckboxInputChange}
      />
    )

    const secondaryView = (
      <SecondaryButton
        breedType="icon-with-text"
        iconType="favourite"
        text={wording.saveToLater}
        onClick={handleSecondaryButtonClick}
      />
    )

    return (
      <React.Fragment>
        {primaryView}
        {secondaryView}
      </React.Fragment>
    )
  } else {
    return <Empty />
  }
}

export {
  defaultRenderProduct,
  defaultRenderOptions,
  defaultRenderDescription,
  defaultRenderRating,
  defaultRenderQuantity,
  defaultRenderButton,
}