import React from 'react'
import { isFunction } from 'exotic'
import { toCommonState } from '@skava/ui/dist/state'
import { wording } from '@skava/ui/dist/words'
import { SwatchList } from 'presets/SwatchList'
import { ProductDetailsProps } from './typings'
import {
  StyledHeading,
  StyledProductTitle,
  StyledSkuLabel,
  StyledSkuValue,
  StyledProductPrice,
  StyledList,
  StyledQuantity,
  StyledSelectDropdown,
  StyledSwatchList,
} from './styled'

function defaultRenderTitle(props: ProductDetailsProps) {
  const { item } = props
  const { name } = item
  return <StyledProductTitle content={name} />
}

function defaultRenderSkuId(props: ProductDetailsProps) {
  const { item } = props
  const { skuId } = item
  return (
    <React.Fragment>
      <StyledSkuLabel>{wording.skuText}:</StyledSkuLabel>
      <StyledSkuValue>{skuId}</StyledSkuValue>
    </React.Fragment>
  )
}

function defaultRenderPrice(props: ProductDetailsProps) {
  const { item } = props
  const { regPrice } = item
  return <StyledProductPrice regularPrice={regPrice} />
}

function defaultRenderProductDetails(props: ProductDetailsProps) {
  const { item } = props
  const { details } = item
  return (
    <React.Fragment>
      <StyledHeading breedType="h4" content="Details" />
      <StyledList list={details} />
    </React.Fragment>
  )
}

function defaultRenderProductOptions(props: ProductDetailsProps) {
  const { item } = props
  const { productOptionsList } = item
  const list = productOptionsList.map(toCommonState)

  return (
    <React.Fragment>
      <StyledHeading breedType="h4" content="Size" />
      <StyledSwatchList list={list} />
    </React.Fragment>
  )
}

function defaultRenderProductQuantity(props: ProductDetailsProps) {
  const { onQuantityInputChange } = props

  const handleQuantityInputChange = (event: Event) => {
    console.log('[handleQuantityInputChange]', event)
    if (isFunction(onQuantityInputChange)) {
      const changeArgs = { event }
      onQuantityInputChange(changeArgs)
    }
  }

  return (
    <React.Fragment>
      <StyledHeading breedType="h4" content="Quantity" />
      <StyledQuantity
        content={''}
        defaultValue={1}
        onChange={handleQuantityInputChange}
      />
    </React.Fragment>
  )
}

function defaultRenderFrequency(props: ProductDetailsProps) {
  const { item } = props
  const { dropdownList } = item
  return (
    <React.Fragment>
      <StyledHeading breedType="h4" content="Frequency" />
      <StyledSelectDropdown list={dropdownList} shouldBeAbsolute={true} />
    </React.Fragment>
  )
}

export {
  defaultRenderTitle,
  defaultRenderSkuId,
  defaultRenderPrice,
  defaultRenderProductDetails,
  defaultRenderProductOptions,
  defaultRenderProductQuantity,
  defaultRenderFrequency,
}