import React from 'react'
import {
  defaultRenderPaymentCardIcon,
  defaultRenderPaymentCardTitle,
  defaultRenderPaymentCardExpiry,
  defaultRenderPaymentMethod,
  defaultRenderGiftCardBalance,
  defaultRenderPaymentCardToggleButton,
  defaultRenderPaymentRemoveButton,
  defaultRenderPaymentCardHeader,
  defaultRenderPaymentCardFooter,
  defaultRenderWrapper,
} from './renderProps'
import { PaymentEditPlaceholderProps } from './typings'

class PaymentEditCard extends React.PureComponent<PaymentEditPlaceholderProps> {
  static defaultProps = {
    className: '',

    renderPaymentCardIcon: defaultRenderPaymentCardIcon,
    renderPaymentCardTitle: defaultRenderPaymentCardTitle,
    renderPaymentCardExpiry: defaultRenderPaymentCardExpiry,
    renderPaymentMethod: defaultRenderPaymentMethod,
    renderGiftCardBalance: defaultRenderGiftCardBalance,
    renderPaymentCardToggleButton: defaultRenderPaymentCardToggleButton,
    renderPaymentRemoveButton: defaultRenderPaymentRemoveButton,
    renderPaymentCardHeader: defaultRenderPaymentCardHeader,
    renderPaymentCardFooter: defaultRenderPaymentCardFooter,
    renderWrapper: defaultRenderWrapper,
  }
  render() {
    const {
      renderPaymentCardHeader,
      renderPaymentCardFooter,
      renderWrapper,
      ...remainingProps
    } = this.props

    const headerView = renderPaymentCardHeader(remainingProps)
    const footerView = renderPaymentCardFooter(remainingProps)

    const children = (
      <React.Fragment>
        {headerView}
        {footerView}
      </React.Fragment>
    )

    const view = renderWrapper({ ...this.props, children })
    return view
  }
}

export { PaymentEditCard }
export default PaymentEditCard