import React from 'react'
import { TextPlaceholder } from 'atoms/Placeholder'
import { ShippingAddressForm } from '../ShippingAddressForm'
import {
  ShippingAddressCardItemProp,
  ShippingAddressCardProps,
  ShippingAddressCardState
} from './typings'
import { HeaderWrapper } from './styled'

function defaultRenderItem(item: ShippingAddressCardItemProp,state: ShippingAddressCardState) {
  return <h1>Abstraction Render Item {item.index}</h1>
}

function defaultRenderList(props: ShippingAddressCardProps,state: ShippingAddressCardState) {
  const { list, renderItem } = props
  const listView = list.map((item, index) => renderItem({...item, index}, state))
  return listView
}

function defaultRenderCard(props: ShippingAddressCardProps,state: ShippingAddressCardState) {
  const { renderList, ...remainingProps} = props
  return renderList(remainingProps)
}

function defaultRenderForm(props: ShippingAddressCardProps,state: ShippingAddressCardState) {
  return <ShippingAddressForm />
}

function defaultRenderHeader(props: ShippingAddressCardProps,state: ShippingAddressCardState) {
  return (
    <HeaderWrapper>
      <TextPlaceholder width={250} height={22} />
      <TextPlaceholder width={350} height={22} onClick={state.handleToggle} />
    </HeaderWrapper>
  )
}

export {
  defaultRenderItem,
  defaultRenderList,
  defaultRenderCard,
  defaultRenderForm,
  defaultRenderHeader
}