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

function defaultRenderHeaderView(
  props: AddPaymentProps,
  state: AnimatedCardState
) {
  const { headingLabel } = props
  const { handleToggle, isExpanded } = state
  const view = (
    <StyledHeadingWrapper>
      <StyledHeading breedType={'h3'} content={headingLabel} />
      <StyledToggleButton
        iconType={wording.close}
        text={wording.addNewCard}
        isExpanded={isExpanded}
        onClick={handleToggle}
      />
    </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)) {
      onPaymentSubmit(args)
    }
    state.handleToggle()
  }

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

export { defaultRenderHeaderView, defaultRenderExpandedView }