import React from 'react'
import { NO_OP } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import { PaymentCardProps } from './typings'
import { PaymentCardPlaceholder } from './styled'
import {
  defaultRenderRemoveButton,
  defaultRenderTogglePaymentMethod,
  defaultRenderButton,
  defaultRenderBalance,
  defaultRenderCardDetail,
  defaultRenderIcon,
} from './renderProps'

@observer
class PaymentCard extends React.Component<PaymentCardProps> {
  static defaultProps = {
    className: '',
    // renderProps
    renderRemoveButton: defaultRenderRemoveButton,
    renderTogglePaymentMethod: defaultRenderTogglePaymentMethod,
    renderButton: defaultRenderButton,
    renderBalance: defaultRenderBalance,
    renderCardDetail: defaultRenderCardDetail,
    renderIcon: defaultRenderIcon,
    // handlers
    onRemovePaymentConfirm: NO_OP,
    onRemovePaymentCancel: NO_OP,
  }

  render() {
    return <PaymentCardPlaceholder {...this.props} />
  }
}

export { PaymentCard }
export default PaymentCard