import React, { SyntheticEvent } from 'react'
import { isFunction } from 'exotic'
import { ShippingAddressCardProps } from './typings'
import {
  Wrapper as HeaderWrapper,
  TitlePlaceholder,
  AddressPlaceholder,
  HeaderTitleWrapper,
  ButtonPlaceholder,
} from './styled'

function defaultRenderTitle(props: ShippingAddressCardProps) {
  const { onButtonClick } = props
  const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {
    if (isFunction(onButtonClick)) {
      onButtonClick(event)
    }
  }
  return (
    <React.Fragment>
      <TitlePlaceholder />
      <ButtonPlaceholder height={24} onClick={handleClick} />
    </React.Fragment>
  )
}

function defaultRenderAddress(props: ShippingAddressCardProps) {
  return <AddressPlaceholder rows={4} itemHeight={14} />
}

function defaultRenderBox(props: ShippingAddressCardProps) {
  const { renderTitle, renderAddress, ...remainingProps } = props
  return (
    <React.Fragment>
      <HeaderTitleWrapper>{renderTitle(remainingProps)}</HeaderTitleWrapper>
      {renderAddress(remainingProps)}
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: ShippingAddressCardProps) {
  const { className, children, dataQa, noWrap } = props
  const attributes = Object.freeze({
    className,
    'data-qa': dataQa,
  })
  const Wrapper = noWrap ? React.Fragment : HeaderWrapper

  return <Wrapper {...attributes}>{children}</Wrapper>
}

export {
  defaultRenderTitle,
  defaultRenderAddress,
  defaultRenderBox,
  defaultRenderWrapper,
}