import React from 'react'
import { NO_OP } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import { AddPayment as AddPaymentPlaceholder } from 'abstractions/PaymentMethod/AddPayment'
import { AddPaymentProps } from './typings'
import {
  defaultRenderHeaderView,
  defaultRenderExpandedView,
} from './renderProps'

@observer
class AddPayment extends React.Component<AddPaymentProps> {
  static defaultProps = {
    className: '',
    // renderProps
    renderHeaderView: defaultRenderHeaderView,
    renderExpandedView: defaultRenderExpandedView,
    // handlers
    onPaymentSubmit: NO_OP,
    onPaymentCancel: NO_OP,
  }
  render() {
    const {
      renderHeaderView,
      renderExpandedView,
      ...remainingProps
    } = this.props
    return (
      <AddPaymentPlaceholder
        renderHeaderView={renderHeaderView}
        renderExpandedView={renderExpandedView}
        {...remainingProps}
      />
    )
  }
}

export { AddPayment }
export default AddPayment