import React from 'react'
import { isSafe } from 'exotic'
import { Empty } from '@skava/ui/dist/components/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,
}