import React from 'react'
import { observer } from 'xmobx/mobx-react'
import {
  boolean,
  object
} from 'proptypes'
import {
  ObserverInput,
  ObserverForm,
  FormState
} from 'src/forms'
import {
  inputList,
  wording
} from './_fixtures'
import {
  StyledShippingForm,
  StyledPrimaryButton
} from './styled'

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

const formStateCard = new FormStateCard()

class FormButton extends React.PureComponent {
  render() {
    return <StyledPrimaryButton {...this.props} data-input-eh={true} />
  }
}

@observer
class FormCard extends ObserverForm {
  static FormState = formStateCard
  SubmitButton = FormButton
  defaultSubmitButtonLabel = wording.button

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

class Form extends React.Component {
  render() {
    return (<StyledShippingForm><FormCard /></StyledShippingForm>)
  }
}

export { Form }
export default Form