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 { handleToggle, isExpanded } = state
  const view = (
    <StyledHeadingWrapper>
      <StyledHeading breedType={'h3'} content={wording.paymentMethod} />
      <StyledToggleButton
        iconType={wording.close}
        text={wording.addNewCard}
        isExpanded={isExpanded}
        onClick={handleToggle}
      />
    </StyledHeadingWrapper>
  )
  return view
}

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

  const handlePaymentCancel = args => {
    state.handleToggle()
    if (isFunction(onPaymentCancel)) {
      onPaymentCancel(args)
    }
  }

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

export { defaultRenderHeaderView, defaultRenderExpandedView }