import React, { SyntheticEvent } from 'react'
import { isFunction } from 'exotic'
import { Empty } from 'atoms/Empty'
import { PaymentCard } from '../PaymentCard'
import { PaymentActionTileProps, PaymentActionTileState } from './typings'
import { BillingAddressForm } from './styled'

function defaultRenderHeaderView(
  props: PaymentActionTileProps,
  state: PaymentActionTileState
) {
  const {
    paymentCardDetails,
    onRemovePaymentConfirm,
    onRemovePaymentCancel,
    ...remainingProps
  } = props
  const paymentCardProps = Object.seal({
    ...paymentCardDetails,
    state,
    onRemovePaymentConfirm,
    onRemovePaymentCancel,
  })
  return <PaymentCard state={state} {...paymentCardProps} {...remainingProps} />
}

function defaultRenderExpandableView(
  props: PaymentActionTileProps,
  state: PaymentActionTileState
) {
  const {
    paymentCardDetails,
    editPaymentConfig,
    onPaymentCancel,
    onPaymentSubmit,
    ...remainingProps
  } = props

  const { formConfig, ...remainingDetails } = paymentCardDetails

  const handlePaymentCancel = (event: SyntheticEvent<HTMLButtonElement>) => {
    if (isFunction(onPaymentCancel)) {
      onPaymentCancel(event)
    }
    state.handleToggle()
  }
  const handlePaymentSubmit = args => {
    if (isFunction(onPaymentSubmit)) {
      onPaymentSubmit(args)
    }
    state.handleToggle()
  }

  return (
    <BillingAddressForm
      isEditPayment={true}
      item={formConfig}
      hasSubmitValidation={true}
      onPaymentSubmit={handlePaymentSubmit}
      onPaymentCancel={handlePaymentCancel}
      {...editPaymentConfig}
      {...remainingProps}
      {...remainingDetails}
    />
  )
}

function defaultRenderFooterView() {
  return <Empty />
}

export {
  defaultRenderHeaderView,
  defaultRenderExpandableView,
  defaultRenderFooterView,
}