import React from 'react'
import { toCommonState } from 'src/state'
import { isFunction } from 'uxui-modules/exotic'
import { SubscriptionEnds } from 'presets/Subscription'
import { ProductDetailsProps } from './typings'
import { SwatchList } from 'presets/SwatchList'
import {
  StyledProductTitle,
  StyledProductPrice,
  StyledProductOptions,
  StyledProductOptionsLabel,
  StyledProductOptionsValue,
  StyledProductQuantity,
  StyledQuantityLabel,
  StyledQuantityValue,
  StyledHeading,
  StyledSelectDropdown,
  StyledQuantity,
} from './styled'
import { listArray } from './fixtures'

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

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

function defaultRenderProductOptions(props: ProductDetailsProps) {
  const list = listArray.map(toCommonState)
  return (
    <StyledProductOptions>
      <StyledHeading breedType="h4" content="Size" />
      <SwatchList list={list} title={' '} />
    </StyledProductOptions>
  )
}

function defaultRenderProductQuantity(props: ProductDetailsProps) {
  const { item, onQuantityInputChange } = props
  const handleQuantityInputChange = changeArgs => {
    console.log('[handleQuantityInputChange]', changeArgs)
    if (isFunction(onQuantityInputChange)) {
      onQuantityInputChange(changeArgs)
    }
  }

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

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

function defaultRenderSubscriptionEnds(props: ProductDetailsProps) {
  const { item } = props
  const radioButtonList = item.radioButtonList.map(toCommonState)
  return (
    <SubscriptionEnds
      breedType="radio"
      list={radioButtonList}
      title={'Ends'}
    />
  )
}

export {
  defaultRenderTitle,
  defaultRenderPrice,
  defaultRenderProductOptions,
  defaultRenderProductQuantity,
  defaultRenderFrequency,
  defaultRenderSubscriptionEnds,
}