import React from 'react'
import {
  renderPaymentCardIcon as defaultRenderPaymentCardIcon,
  renderPaymentCardTitle as defaultRenderPaymentCardTitle,
  renderPaymentCardExpiry as defaultRenderPaymentCardExpiry,
  renderPaymentMethod as defaultRenderPaymentMethod,
  renderGiftCardBalance as defaultRenderGiftCardBalance,
  renderPaymentCardToggleButton as defaultRenderPaymentCardToggleButton,
  renderPaymentRemoveButton as defaultRenderPaymentRemoveButton,
  renderPaymentCardHeader as defaultRenderPaymentCardHeader,
  renderPaymentCardFooter as defaultRenderPaymentCardFooter,
  renderWrapper as 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