import React from 'react'
import { ProductItem } from 'abstractions/BundleCollection'
import { ProductListProps, ItemDetailProps } from './typings'
import { Header, Title, ItemCount, Box, Wrapper } from './styled'

function defaultRenderItem(item: ItemDetailProps) {
  const { index } = item
  return <ProductItem key={index} {...item} />
}

function defaultRenderList(props: ProductListProps) {
  const { renderItem, list } = props
  const productCount = list.length
  const listView = list.map((item, index) => renderItem({item, productCount, index}))
  return listView
}

function defaultRenderHeader(props: ProductListProps) {
  return (
    <Header>
      <Title width={250} />
      <ItemCount width={100}/>
    </Header>
  )
}

function renderDataQaAttribute(props: ProductListProps) {
  const {isMandatoryProducts, isAddonProducts, isCollectionProducts} = props

  switch (true) {
    case isAddonProducts:
      return 'qa-addon-container'
    case isCollectionProducts:
      return 'qa-collection-container'
    case isMandatoryProducts:
    default:
      return 'qa-bundle-container'
  }
}

function defaultRenderBox(props: ProductListProps) {
  const { renderHeader, renderList, ...remainingProps } = props
  return (
    <Box data-qa={renderDataQaAttribute(remainingProps)}>
      {renderHeader(remainingProps)}
      {renderList(remainingProps)}
    </Box>
  )
}

function defaultRenderWrapper(props: ProductListProps) {
  const { className, children } = props
  return <Wrapper className={className}>{children}</Wrapper>
}

export { defaultRenderHeader, defaultRenderList, defaultRenderItem, defaultRenderBox, defaultRenderWrapper }