import React from 'react'
import { isFunction, isObj, isSafe } from 'exotic'
import { AddressToggle } from 'presets/Checkout'
import { ShippingAddressCardProps } from './typings'
import { Title, StyledAddress, HeaderButton } from './styled'

function defaultRenderTitle(props: ShippingAddressCardProps) {
  const { title, buttonLabel, onButtonClick, buttonDataQa, address } = props

  const handleClick = (event: Event) => {
    if (isFunction(onButtonClick)) {
      onButtonClick(event)
    }
  }

  return (
    <React.Fragment>
      <Title breedType={'h3'} content={title} />
      {isSafe(address) && isObj(address) && (
        <HeaderButton
          text={buttonLabel}
          onClick={handleClick}
          data-qa={buttonDataQa}
        />
      )}
    </React.Fragment>
  )
}

function defaultRenderAddress(props: ShippingAddressCardProps) {
  const { address, addressList, ...remainingProps } = props
  const view =
    isSafe(address) && isObj(address) ? (
      <StyledAddress address={address} {...remainingProps} />
    ) : (
      <AddressToggle list={addressList} {...remainingProps} />
    )
  return view
}

export { defaultRenderTitle, defaultRenderAddress }