import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { NO_OP } from 'exotic'
import { PaymentCardProps } from './typings'
import {
  defaultRenderRemoveButton,
  defaultRenderTogglePaymentMethod,
  defaultRenderFooter,
  defaultRenderButton,
  defaultRenderBalance,
  defaultRenderCardDetail,
  defaultRenderIcon,
  defaultRenderHeader,
  defaultRenderBox,
  defaultRenderWrapper,
} from './renderProps'
// import { PaymentCardInstance } from './state'

@observer
class PaymentCard extends React.Component<PaymentCardProps> {
  static defaultProps = {
    className: '',
    // handlers
    handleToggleClick: NO_OP,
    handleRemoveCard: NO_OP,
    // renderProps
    renderRemoveButton: defaultRenderRemoveButton,
    renderTogglePaymentMethod: defaultRenderTogglePaymentMethod,
    renderFooter: defaultRenderFooter,
    renderButton: defaultRenderButton,
    renderBalance: defaultRenderBalance,
    renderCardDetail: defaultRenderCardDetail,
    renderIcon: defaultRenderIcon,
    renderHeader: defaultRenderHeader,
    renderWrapper: defaultRenderWrapper,
  }
  // observableState: PaymentCardInstance = new PaymentCardInstance()
  render() {
    const {
      renderWrapper,
      ...remainingProps
    } = this.props

    const children = defaultRenderBox(remainingProps)
    const view = renderWrapper({ ...remainingProps, children })

    return view
  }
}

export { PaymentCard }
export default PaymentCard