import React from 'react'
import { isFunction } from 'exotic'
import { CardState } from 'organisms/ExpandableCard'
import { TextPlaceholder } from 'atoms/Placeholder'
import { AddressToggleProps } from './typings'
import {
  StyledSeparator,
  ToggleHeaderWrapper,
  StyledShippingAddressOption,
  StyledSingleShipping,
  SaveAddressWrapper,
  AddNewAddressWrapper,
} from './styled'

function defaultRenderSavedButton(props: AddressToggleProps) {
  return <TextPlaceholder width="200" height="16" />
}

function defaultRenderAddNewButton(props: AddressToggleProps) {
  return <TextPlaceholder width="200" height="16" />
}

function defaultRenderToggleButton(
  props: AddressToggleProps,
  state: CardState
) {
  const {
    onViewToggleChange,
    renderSavedButton,
    renderAddNewButton,
    ...remainingProps
  } = props
  const { handleToggle, isExpanded } = state
  const handleClick = () => {
    handleToggle()
    if (isFunction(onViewToggleChange)) {
      onViewToggleChange({ isSavedAddressView: isExpanded })
    }
  }
  const saveButtonView = renderSavedButton({ ...remainingProps, isExpanded })
  const addNewButtonView = renderAddNewButton({ ...remainingProps, isExpanded })
  return (
    <ToggleHeaderWrapper>
      <SaveAddressWrapper isExpandView={!isExpanded} onClick={handleClick}>
        {saveButtonView}
      </SaveAddressWrapper>
      <StyledSeparator> | </StyledSeparator>
      <AddNewAddressWrapper isExpandView={isExpanded} onClick={handleClick}>
        {addNewButtonView}
      </AddNewAddressWrapper>
    </ToggleHeaderWrapper>
  )
}

function defaultRenderDefaultView(props: AddressToggleProps, state: CardState) {
  const { list } = props
  return <StyledShippingAddressOption list={list} />
}

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

export {
  defaultRenderToggleButton,
  defaultRenderExpandedView,
  defaultRenderDefaultView,
  defaultRenderSavedButton,
  defaultRenderAddNewButton,
}