import React from 'react'
import { isObj } from 'exotic'
import {
  StyledPaymentMethodHeading,
  StyledPaymentInformation,
  StyledOrderSummary,
} from './styled'
import { PaymentSummaryProps } from './typings'

function defaultRenderPaymentMethod(props: PaymentSummaryProps) {
  const { paymentMethodConfig } = props
  const headingLabel = isObj(paymentMethodConfig) && paymentMethodConfig.label
  const paymentInformationValue =
    isObj(paymentMethodConfig) && paymentMethodConfig.value

  return (
    <React.Fragment>
      <StyledPaymentMethodHeading breedType={'h4'} content={headingLabel} />
      <StyledPaymentInformation content={paymentInformationValue} />
    </React.Fragment>
  )
}

function defaultRenderOrderSummary(props: PaymentSummaryProps) {
  const { orderSummaryConfig } = props
  const title = isObj(orderSummaryConfig) && orderSummaryConfig.title
  const list = isObj(orderSummaryConfig) && orderSummaryConfig.list

  return <StyledOrderSummary title={title} list={list} />
}

export { defaultRenderOrderSummary, defaultRenderPaymentMethod }