import React from 'react'
import { PaymentCardFormPlaceholderProps } from './typings'
import {
  renderPaymentCardFormWrapper as defaultRenderPaymentCardFormWrapper,
  renderPaymentCardFormContainer as defaultRenderPaymentCardFormContainer,
  renderPaymentCardFormNameSection as defaultRenderPaymentCardFormNameSection,
  renderPaymentCardDetailsSection as defaultRenderPaymentCardDetailsSection,
  renderPaymentCardMethodCheckSection as defaultRenderPaymentCardMethodCheckSection,
  renderPaymentCardFormButtonSection as defaultRenderPaymentCardFormButtonSection,
} from './renderProps'

class PaymentCardForm extends React.PureComponent<
  PaymentCardFormPlaceholderProps
> {
  static defaultProps = {
    className: '',
    renderPaymentCardFormWrapper: defaultRenderPaymentCardFormWrapper,
    renderPaymentCardFormContainer: defaultRenderPaymentCardFormContainer,
    renderPaymentCardFormNameSection: defaultRenderPaymentCardFormNameSection,
    renderPaymentCardDetailsSection: defaultRenderPaymentCardDetailsSection,
    renderPaymentCardMethodCheckSection: defaultRenderPaymentCardMethodCheckSection,
    renderPaymentCardFormButtonSection: defaultRenderPaymentCardFormButtonSection,
  }
  render() {
    const {
      renderPaymentCardFormWrapper,
      renderPaymentCardFormContainer,
      ...remainingProps
    } = this.props

    const children = renderPaymentCardFormContainer(remainingProps)
    const view = renderPaymentCardFormWrapper({ ...remainingProps, children })
    return view
  }
}

export { PaymentCardForm }
export default PaymentCardForm