import React from 'react'
import { Empty } from '@skava/ui/dist/components/atoms/Empty'
import { wording } from '@skava/ui/dist/words'
import { ShippingAddressForm } from 'presets/Subscription/ShippingAddressForm'
import {
  ShippingAddressCardItemProp,
  ShippingAddressCardProps,
  ShippingAddressCardState,
} from './typings'
import {
  HeaderWrapper,
  HeaderContent,
  HeaderToggleButton,
  StyledInformationCard,
  ItemWrapper,
  StyledPhysicalAddress,
} from './styled'

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

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

function defaultRenderItem(
  item?: ShippingAddressCardItemProp,
  state?: ShippingAddressCardState
) {
  const {
    isSubscriptionAddress,
    isDefaultAddress,
    onShippingCardSave,
    ...remainingProps
  } = item
  const addressView = () => <StyledPhysicalAddress address={remainingProps} />

  const view = isSubscriptionAddress ? (
    <StyledInformationCard
      renderDefaultView={addressView}
      renderExpandedView={defaultRenderForm}
      onShippingCardSave={onShippingCardSave}
      item={remainingProps}
    />
  ) : (
    addressView()
  )

  return <ItemWrapper isDefaultAddress={isDefaultAddress}>{view}</ItemWrapper>
}

export { defaultRenderHeader, defaultRenderForm, defaultRenderItem }