import React from 'react'
import { omit } from '@skava/utils'
import { isFunction } from 'exotic'
import { ShippingMethodOptionItemProps } from 'presets/Checkout/ShippingMethodOption'
import { MultipleShippingProps } from './typings'
import {
  StyledProductItem,
  StyledShippingAddress,
  StyledShippingMethod,
  StyledDeliveryInstruction,
} from './styled'

function defaultRenderProductItem(props: MultipleShippingProps) {
  const { productItem } = props
  const item = {
    ...productItem,
    brandNameDataQa: 'qa-product-name',
    productNameDataQa: 'qa-product-description',
  }
  return <StyledProductItem item={item} />
}

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

function defaultRenderShippingMethod(props: MultipleShippingProps) {
  const {
    identifier,
    shippingMethodOptionList,
    handleShippingMethodChange,
  } = props

  const handleChange = (event: Event, item: ShippingMethodOptionItemProps) => {
    if (isFunction(handleShippingMethodChange)) {
      handleShippingMethodChange({ item, identifier })
    }
  }
  return (
    <StyledShippingMethod
      list={shippingMethodOptionList}
      onChange={handleChange}
    />
  )
}

function defaultRenderDeliveryInstruction(props: MultipleShippingProps) {
  const { deliveryInstructionConfig, ...remainingProps } = props
  const passThroughProps = omit(props, ['renderExpandedView'])
  return (
    <StyledDeliveryInstruction
      {...deliveryInstructionConfig}
      {...passThroughProps}
    />
  )
}

export {
  defaultRenderProductItem,
  defaultRenderShippingAddress,
  defaultRenderShippingMethod,
  defaultRenderDeliveryInstruction,
}