import React from 'react'
import { isSafe } from 'uxui-modules/exotic'
import { Empty } from 'atoms/Empty'
import { CheckoutCartBundleProps, CheckoutCartBundleState } from './typings'
import { HeaderContent, HeaderToggleButton, Header } from './styled'
import { ProductItem } from './ProductItem'

function defaultRenderHeader(props: CheckoutCartBundleProps, state?: CheckoutCartBundleState) {
  return (
    <Header isExpanded={state.isExpanded}>
      <HeaderContent width={150} height={20} />
      <HeaderToggleButton width={70} height={24} onClick={state.handleToggle}/>
    </Header>
  )
}

function defaultRenderExpandable(props: CheckoutCartBundleProps) {
  const { mandatoryProducts, addonProducts, renderList, ...remainingProps } = props
  return (
    <React.Fragment>
      {renderList(mandatoryProducts, remainingProps)}
      {renderList(addonProducts, remainingProps)}
    </React.Fragment>
  )
}

function defaultRenderFooter() {
  return <Empty />
}

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

function defaultRenderList(list: CheckoutCartBundleProps, props: CheckoutCartBundleProps) {
  const { renderItem, ...remainingProps } = props
  const productCount = list.length
  const listView = isSafe(list)
    ? list.map((item: Object, index: number) => renderItem( {item, index, productCount, ...remainingProps} ))
    : <Empty />

  return listView
}

export {
  defaultRenderHeader,
  defaultRenderExpandable,
  defaultRenderFooter,
  defaultRenderCheckoutItem,
  defaultRenderList,
}