import React from 'react'
import { wording } from 'src/words'
import { AnimatedCardState } from 'presets/AnimatedExpandableCard/typings'
import { ProductItem } from './ProductItem'
import {
  Header,
  StyledViewButton,
  StyledText,
  StyledItemText,
  StyledAddonText,
} from './styled'
import { CheckoutCartBundleProps } from './typings'

function getHeaderContent(
  props: CheckoutCartBundleProps,
  state?: AnimatedCardState
) {
  const { mandatoryProducts, addonProducts, headerLabel } = props

  const mandatoryProductCount = mandatoryProducts.length
  const addonProductCount = addonProducts.length

  const mandatoryBundleCaption =
    mandatoryProductCount > 1 ? wording.items : wording.item
  const addonBundleCaption =
    addonProductCount > 1 ? wording.addonsText : wording.addonText

  const itemCaption = `${mandatoryProductCount} ${mandatoryBundleCaption}, `
  const addonCaption = `${addonProductCount} ${addonBundleCaption}`
  const arrowDirection = state.isExpanded ? 'up' : 'down'

  return {
    itemCaption,
    addonCaption,
    arrowDirection,
    headerLabel,
  }
}

function defaultRenderHeader(
  props: CheckoutCartBundleProps,
  state?: AnimatedCardState
) {
  const {
    itemCaption,
    addonCaption,
    arrowDirection,
    headerLabel,
  } = getHeaderContent(props, state)

  return (
    <Header isExpanded={state.isExpanded}>
      <StyledText>
        <StyledItemText>{itemCaption}</StyledItemText>
        <StyledAddonText>{addonCaption}</StyledAddonText>
      </StyledText>
      <StyledViewButton
        breedType="text-with-icon"
        iconType="arrow"
        direction={arrowDirection}
        iconAlignType="suffix"
        text={headerLabel}
        onClick={state.handleToggle}
      />
    </Header>
  )
}

function defaultRenderItem(props: CheckoutCartBundleProps) {
  const { item, index, ...remainingProps } = props
  return (
    <ProductItem key={index} item={item} index={index} {...remainingProps} />
  )
}

export { defaultRenderItem, defaultRenderHeader }