import React from 'react'
import { isFunction } from 'exotic'
import { StyledHeadingWrapper } from 'abstractions/PaymentMethod/AddPayment'
import { AnimatedCardState } from 'presets/AnimatedExpandableCard'
import { wording } from '@skava/ui/dist/words'
import {
  StyledPaymentWithBillingAddress,
  StyledToggleButton,
  StyledHeading,
} from './styled'
import { AddPaymentProps } from './typings'

function defaultRenderHeaderView(
  props: AddPaymentProps,
  state: AnimatedCardState
) {
  const { headingLabel, onPaymentAdd } = props
  const { handleToggle, isExpanded } = state

  const handleClick = () => {
    handleToggle()
    if (isFunction(onPaymentAdd)) {
      onPaymentAdd(state)
    }
  }
  const view = (
    <StyledHeadingWrapper>
      <StyledHeading breedType={'h3'} content={headingLabel} />
      <StyledToggleButton
        iconType={wording.close}
        text={wording.addNewCard}
        isExpanded={isExpanded}
        onClick={handleClick}
      />
    </StyledHeadingWrapper>
  )
  return view
}

function defaultRenderExpandedView(
  props: AddPaymentProps,
  state: AnimatedCardState
) {
  const { onPaymentCancel, onPaymentSubmit, ...remainingProps } = props

  const handlePaymentCancel = args => {
    if (isFunction(onPaymentCancel)) {
      onPaymentCancel(args)
    }
    state.handleToggle()
  }
  const handlePaymentSubmit = args => {
    if (isFunction(onPaymentSubmit)) {
      const hasShippingAddress = onPaymentSubmit(args)
      // console.info('[Add Payment] handlePaymentSubmit')
      // console.debug(hasShippingAddress)
      if (hasShippingAddress !== false) {
        state.handleToggle()
      }
      return hasShippingAddress
    }
  }

  const view = (
    <StyledPaymentWithBillingAddress
      onPaymentCancel={handlePaymentCancel}
      onPaymentSubmit={handlePaymentSubmit}
      isExpanded={state.isExpanded}
      {...remainingProps}
    />
  )
  return view
}

export { defaultRenderHeaderView, defaultRenderExpandedView }