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, onChangeAddress, buttonDataQa, address } = props

  const handleClick = (event: Event) => {
    if (isFunction(onChangeAddress)) {
      onChangeAddress(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, onViewToggle, ...remainingProps } = props
  const handleViewToggleChange = onViewToggle
  const view =
    isSafe(address) && isObj(address) ? (
      <StyledAddress address={address} />
    ) : (
      <AddressToggle
        onViewToggleChange={handleViewToggleChange}
        {...remainingProps}
      />
    )
  return view
}

export { defaultRenderTitle, defaultRenderAddress }