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,
}