import React from 'react'
import { isFunction } from 'exotic'
import { fromStringToAddress } from '@skava/utils'
import { ShippingAddressCard } from 'presets/Checkout/ShippingAddressCard'
import { StyledAddressToggle } from './styled'
import { SingleShippingProps, SingleShippingState } from './typings'

function defaultRenderHeaderView(
  props: SingleShippingProps,
  state: SingleShippingState
) {
  const {
    buttonLabel,
    buttonDataQa,
    shippingAddressOptionList,
    handleToggleChange,
    handleFormBlur,
    ...remainingProps
  } = props
  const { handleToggle, address } = state
  const attributes = {
    buttonLabel,
    address,
    buttonDataQa,
  }
  return (
    <ShippingAddressCard
      onChangeAddress={handleToggle}
      onToggleChange={handleToggleChange}
      onFormBlur={handleFormBlur}
      singleShippingState={state}
      list={shippingAddressOptionList}
      {...attributes}
      {...remainingProps}
    />
  )
}

const defaultHandleToggleChange = (event, item, selectionStateThis) => {
  const {
    onShippingAddressChange,
    singleShippingState,
  } = selectionStateThis.props
  singleShippingState.address = fromStringToAddress(item.value)
  console.log('[Single Shipping] handleToggleChange ', item, selectionStateThis)
  if (isFunction(onShippingAddressChange)) {
    onShippingAddressChange({
      address: singleShippingState.address,
      identifier: selectionStateThis.props.productIdentifier,
    })
  }
}

const defaultHandleFormBlur = args => {
  const { props, state } = args
  const { onShippingAddressChange, singleShippingState } = props
  console.log(
    '[Single Shipping] handleFormBlur ',
    singleShippingState.address,
    props
  )
  singleShippingState.address = state.toSerialized()
  if (isFunction(onShippingAddressChange)) {
    onShippingAddressChange(singleShippingState.address)
  }
}

function defaultRenderExpandableView(
  props: SingleShippingProps,
  state: SingleShippingState
) {
  const {
    shippingAddressOptionList,
    handleToggleChange,
    onViewToggle,
    handleFormBlur,
    identifier,
    ...remainingProps
  } = props

  const handleViewToggleChange = onViewToggle
  return (
    <StyledAddressToggle
      list={shippingAddressOptionList}
      singleShippingState={state}
      onToggleChange={handleToggleChange}
      onFormBlur={handleFormBlur}
      onViewToggleChange={handleViewToggleChange}
      productIdentifier={identifier}
      {...remainingProps}
    />
  )
}

export {
  defaultRenderHeaderView,
  defaultRenderExpandableView,
  defaultHandleToggleChange,
  defaultHandleFormBlur,
}