import React from 'react'
import { isFunction, isSafe } from 'exotic'
import { wording } from '@skava/ui/dist/words'
import { Empty } from '@skava/ui/dist/components/atoms/Empty'
import { SwatchList } from 'presets/SwatchList'
import { ProductItemProps } from './typings'
import {
  StyledHeading,
  StyledBrandName,
  StyledProductName,
  StyledProductPrice,
  StyledQuantity,
  InventoryContent,
  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} target="_top">{imageView}</ProductNavigationLink>
      <StyledBrandName breedType="h4" content={brandName} />
      <ProductNavigationLink to={navigationUrl} target="_top">
        <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>
  )
}

enum stockStatus {
  'available' = '#009944',
  'limited' = '#FFCC00',
  'sold out' = '#EA2227',
}

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

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

  inventoryContent = inventoryContent.toLocaleLowerCase()

  const view = isButton && (
    <React.Fragment>
      <StyledQuantity content={wording.quantity} defaultValue={1} onChange={handleQuantityInputChange} />
      {isSafe(inventoryContent)
        ? <InventoryContent color={stockStatus[inventoryContent]}>{inventoryContent}</InventoryContent>
        : <Empty />
      }
    </React.Fragment>
  )

  return view
}

function defaultRenderButton(props: ProductItemProps) {
  const { item, onCheckBoxInputChange, onPrimaryButtonClick, onSecondaryButtonClick } = props
  const {
    isCollectionSubProduct,
    isBundleSubProduct,
    hasAddon,
    isBundle,
    navigationUrl,
    inventoryContent= ''
  } = 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)
    }
  }

  const isAddToCartDisabled = inventoryContent.toLowerCase().substring(0, 1) === 's' ? true : false

  if (isBundleSubProduct && hasAddon || isCollectionSubProduct) {
    const primaryView = isCollectionSubProduct
      ? (isBundle ? <StyledLink text={wording.viewBundle} to={navigationUrl} target="_top" /> : <PrimaryButton breedType="icon-with-text" iconType="cart" text={wording.addToCart} onClick={handlePrimaryButtonClick} isAddToCartDisabled={isAddToCartDisabled} />)
      : <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,
}