import React from 'react'
import { wording } from 'src/words'
import { isObj, isFunction, isSafe } from 'exotic'
import { HeaderButton, Title } from 'presets/Checkout/ShippingAddressCard'
import { SingleShippingProps } from './typings'
import { StyledSeparatorIcon, FlexCenter } from './styled'

function defaultRenderTitle(props: SingleShippingProps) {
  const {
    title,
    onChangeAddress,
    onShipToMultipleAddress,
    address,
  } = props

  const handleChangeAddress = (event: Event) => {
    if (isFunction(onChangeAddress)) {
      onChangeAddress(event)
    }
  }
  const handleShipToMultipleAddress = (event: Event) => {
    if (isFunction(onShipToMultipleAddress)) {
      onShipToMultipleAddress(event)
    }
  }

  return (
    <React.Fragment>
      <Title breedType={'h3'} content={title} />
      <FlexCenter>
        {isSafe(address) &&
          isObj(address) && (
            <React.Fragment>
              <HeaderButton
                text={wording.change}
                onClick={handleChangeAddress}
                data-qa={'qa-change-shipping'}
              />
              <StyledSeparatorIcon />
            </React.Fragment>
          )}
        <HeaderButton
          text={wording.multipleAddressText}
          onClick={handleShipToMultipleAddress}
          data-qa={'qa-ship-to-multiple'}
        />
      </FlexCenter>
    </React.Fragment>
  )
}

export { defaultRenderTitle }