import React from 'react'
import { MultipleShippingProps } from './typings'
import {
  StyledProductItem,
  StyledShippingAddress,
  StyledShippingMethod,
  StyledDeliveryInstruction,
  Wrapper,
} from './styled'

function defaultRenderProductItem(props: MultipleShippingProps) {
  return <StyledProductItem />
}

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

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

function defaultRenderDeliveryInstruction(props: MultipleShippingProps) {
  return <StyledDeliveryInstruction />
}

function defaultRenderBox(props: MultipleShippingProps) {
  const {
    renderProductItem,
    renderShippingAddress,
    renderShippingMethod,
    renderDeliveryInstruction,
    ...remainingProps
  } = props

  return (
    <React.Fragment>
      {renderProductItem(remainingProps)}
      {renderShippingAddress(remainingProps)}
      {renderDeliveryInstruction(remainingProps)}
      {renderShippingMethod(remainingProps)}
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: MultipleShippingProps) {
  const { className, children, dataQa } = props
  return (
    <Wrapper className={className} data-qa={dataQa}>
      {children}
    </Wrapper>
  )
}

export {
  defaultRenderProductItem,
  defaultRenderShippingAddress,
  defaultRenderShippingMethod,
  defaultRenderDeliveryInstruction,
  //
  defaultRenderBox,
  defaultRenderWrapper,
}