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

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

function defaultRenderAddress(props: ShippingAddressCardProps) {
  const { address, addressList, ...remainingProps } = props
  return isObj(address) ? (
    <AddressPlaceholder rows={4} itemHeight={14} />
  ) : (
    <AddressToggle list={addressList} {...remainingProps} />
  )
}

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,
}