import React from 'react'
import { DeliveryInstruction } from 'presets/Checkout'
import { MultipleShippingProps } from './typings'
import {
  StyledProductItem,
  StyledShippingAddress,
  StyledShippingMethod,
} from './styled'

function defaultRenderProductItem(props: MultipleShippingProps) {
  const { productItem } = props
  return <StyledProductItem item={productItem} />
}

function defaultRenderShippingAddress(props: MultipleShippingProps) {
  return <StyledShippingAddress {...props} />
}

function defaultRenderShippingMethod(props: MultipleShippingProps) {
  const { shippingMethodOptionList, handleShippingMethodChange } = props
  return (
    <StyledShippingMethod
      list={shippingMethodOptionList}
      onChange={handleShippingMethodChange}
    />
  )
}

function defaultRenderDeliveryInstruction(props: MultipleShippingProps) {
  const {
    deliveryInstructionConfig,
    handleAddDeliveryInstruction,
    handleRemoveDeliveryInstruction,
  } = props
  return (
    <DeliveryInstruction
      {...deliveryInstructionConfig}
      onSubmit={handleAddDeliveryInstruction}
      onCancel={handleRemoveDeliveryInstruction}
    />
  )
}

export {
  defaultRenderProductItem,
  defaultRenderShippingAddress,
  defaultRenderShippingMethod,
  defaultRenderDeliveryInstruction,
}