import React from 'react'
import { PaymentAddNewCardProps } from './typings'
import {
  PaymentAddCardHeader,
  PaymentAddCardHeadingSection,
  PaymentAddCardButtonSection,
  PaymentAddCardWrapper,
} from './styled'
import { RectanglePlaceholder, TextPlaceholder } from 'atoms/Placeholder'

/**
 * rendering heading
 */
function defaultRenderPaymentCardHeading(props: PaymentAddNewCardProps) {
  return <TextPlaceholder width={220} height={20} />
}

/**
 * render button
 */
function defaultRenderPaymentCardButton(props: PaymentAddNewCardProps) {
  return <RectanglePlaceholder height={44} />
}

/**
 * Local Function
 * render payment card header
 */
function defaultRenderPaymentCardHeader(props: PaymentAddNewCardProps) {
  const {
    renderPaymentCardHeading,
    renderPaymentCardButton,
    ...remainingProps
  } = props

  return (
    <PaymentAddCardHeader>
      <PaymentAddCardHeadingSection>
        {renderPaymentCardHeading(remainingProps)}
      </PaymentAddCardHeadingSection>
      <PaymentAddCardButtonSection>
        {renderPaymentCardButton(remainingProps)}
      </PaymentAddCardButtonSection>
    </PaymentAddCardHeader>
  )
}

/**
 * render main wrapper
 */
function defaultRenderPaymentCardWrapper(props: PaymentAddNewCardProps) {
  let { className, children, ...remainingProps } = props
  children = defaultRenderPaymentCardHeader(remainingProps)

  return (
    <PaymentAddCardWrapper className={className}>
      {children}
    </PaymentAddCardWrapper>
  )
}

export {
  defaultRenderPaymentCardHeading,
  defaultRenderPaymentCardButton,
  defaultRenderPaymentCardWrapper,
}