import React from 'react'
import {
  DeliveryInstruction,
  ShippingMethodOption,
} from 'abstractions/Checkout'
import { SingleShipping } from 'abstractions/Checkout/GuestUser'
import { ProductItem } from 'abstractions/ProductPieces'
import { MultipleShippingProps } from './typings'
import {
  ProductItemWrapper,
  ShippingAddressWrapper,
  ShippingMethodWrapper,
  DeliveryInstructionWrapper,
  Wrapper,
} from './styled'

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

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

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

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

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

  return (
    <React.Fragment>
      <ProductItemWrapper>
        {renderProductItem(remainingProps)}
      </ProductItemWrapper>
      <ShippingAddressWrapper>
        {renderShippingAddress(remainingProps)}
      </ShippingAddressWrapper>
      <ShippingMethodWrapper>
        {renderShippingMethod(remainingProps)}
      </ShippingMethodWrapper>
      <DeliveryInstructionWrapper>
        {renderDeliveryInstruction(remainingProps)}
      </DeliveryInstructionWrapper>
    </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,
}