import React from 'react'
import { wording } from 'src/words'
import { isFunction } from 'exotic'
import { AddressToggleProps } from './typings'
import {
  StyledSingleShipping,
  StyledShippingAddressOption,
  StyledAddNewAddress,
  StyledSavedAddress,
} from './styled'

function defaultRenderSavedButton(props: AddressToggleProps) {
  const { isExpanded } = props
  return (
    <StyledSavedAddress
      content={wording.savedAddresses}
      isExpanded={!isExpanded}
    />
  )
}

function defaultRenderAddNewButton(props: AddressToggleProps) {
  const { isExpanded } = props
  return (
    <StyledAddNewAddress
      content={wording.newShippingAddressHeaderLabel}
      isExpanded={isExpanded}
    />
  )
}

function defaultRenderExpandedView(props: AddressToggleProps) {
  return <StyledSingleShipping {...props} />
}

function defaultRenderDefaultView(props: AddressToggleProps) {
  const { onToggleChange, ...remainingProps } = props
  const handleChange = (changeArgs: Event, item: any, selectionStateThis) => {
    console.log('[AddressToggle] handleChange', item, selectionStateThis)
    if (isFunction(onToggleChange)) {
      onToggleChange(changeArgs, item, selectionStateThis)
    }
  }
  return (
    <StyledShippingAddressOption onChange={handleChange} {...remainingProps} />
  )
}

export {
  defaultRenderSavedButton,
  defaultRenderAddNewButton,
  defaultRenderExpandedView,
  defaultRenderDefaultView,
}