import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { commonState, CommonState } from '@skava/ui/dist/state'
import { PaymentWithBillingAddressProps } from './typings'
import {
  defaultRenderForm,
  defaultRenderBox,
  defaultRenderWrapper,
} from './renderProps'

@observer
class PaymentWithBillingAddress extends React.Component<
  PaymentWithBillingAddressProps
  > {
  static defaultProps = {
    className: '',
    // renderProps
    renderForm: defaultRenderForm,
    renderWrapper: defaultRenderWrapper,
  }
  observableState: CommonState = commonState(this.props)
  render() {
    const { renderWrapper, ...remainingProps } = this.props
    const children = defaultRenderBox(remainingProps, this.observableState)
    const view = renderWrapper({ children, ...remainingProps })
    return view
  }
}

export { PaymentWithBillingAddress }
export default PaymentWithBillingAddress