import React from 'react'
import { wording } from 'src/words'
import { PhysicalAddress } from 'molecules/PhysicalAddress'
import { ShippingAddressForm } from 'presets/Subscription/ShippingAddressForm'
import { ShippingAddressCardItemProp, ShippingAddressCardProps, ShippingAddressCardState} from './typings'
import { HeaderWrapper, HeaderContent, HeaderToggleButton, StyledInformationCard } from './styled'

function defaultRenderHeader(props?: ShippingAddressCardProps, state?: ShippingAddressCardState) {
  return (
    <HeaderWrapper isExpanded={state.isExpanded} >
      <HeaderContent>{wording.ShippingAddressHeaderLabel}</HeaderContent>
      <HeaderToggleButton onClick={state.handleToggle}>{wording.addNewAddressText}</HeaderToggleButton>
    </HeaderWrapper>
  )
}

function defaultRenderForm(props?: ShippingAddressCardProps, state?: ShippingAddressCardState) {
  return <ShippingAddressForm />
}

function defaultRenderItem(item?: ShippingAddressCardItemProp, state?: ShippingAddressCardState) {
  const addressView = () => <PhysicalAddress address={item}/>
  return <StyledInformationCard renderDefaultView={addressView} />
}

export {
  defaultRenderHeader,
  defaultRenderForm,
  defaultRenderItem,
}