import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { ObserverInput, ObserverForm, FormState } from 'src/forms'
import { inputList } from './fixture'

// @todo - radiogroup
class FormStateCard extends FormState {
  inputsList = inputList
}

const formStateCard = new FormStateCard()

class WrapElementEh extends React.PureComponent {
  render() {
    return <div {...this.props} data-wrap-eh={true} />
  }
}
class InputElementEh extends React.PureComponent {
  render() {
    return <input {...this.props} data-input-eh={true} />
  }
}
class SubmitButtonEh extends React.PureComponent {
  render() {
    return <button {...this.props} data-input-eh={true} />
  }
}
class InputCard extends ObserverInput {
  Wrap = WrapElementEh
  // Input = InputElementEh
}

@observer
class FormCreditCard extends ObserverForm {
  static FormState = formStateCard
  // Input = InputCard
  SubmitButton = SubmitButtonEh

  static defaultProps = {
    state: formStateCard,
  }
  handleSubmit = event => {
    event.preventDefault()
    console.log('data:', this.state.toSerialized())
  }
}

class AllInOneForm extends React.Component {
  render() {
    return <FormCreditCard />
  }
}

export { AllInOneForm }
export default AllInOneForm