import React from 'react'
import { wording } from 'src/words'
import { isFunction, isSafe, isArray } 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 listLength =
    isSafe(props.list) && isArray(props.list) && props.list.length

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

export {
  defaultRenderSavedButton,
  defaultRenderAddNewButton,
  defaultRenderExpandedView,
  defaultRenderDefaultView,
}