import React, { SyntheticEvent } from 'react'
import { isFunction } from 'exotic'
import { wording } from '@skava/ui/dist/words'
import { ShippingAddress } from '@skava/ui/dist/forms/views'
import { SingleShippingProps } from './typings'
import { StyledPrimaryButton } from './styled'

function defaultRenderButton(props: SingleShippingProps) {
  const { onShipToMultipleAddress } = props

  const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {
    console.log('[onShipToMultipleAddress]', event)
    if (isFunction(onShipToMultipleAddress)) {
      onShipToMultipleAddress(event)
    }
  }

  return (
    <StyledPrimaryButton
      text={wording.multipleAddressText}
      onClick={handleClick}
    />
  )
}

function defaultRenderForm(props: SingleShippingProps) {
  return <ShippingAddress {...props} />
}

export { defaultRenderButton, defaultRenderForm }