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()

const SubmitButton = (props) => <StyledPrimaryButton {...props} />

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

  classList = {
    form: 'subscription-add-new-payment-form',
    submitButton: 'subscription-add-new-payment-submit-button',
  }

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

class FormFields extends React.Component {
  render() {
    return (<StyledShippingForm><ShippingForm /></StyledShippingForm>)
  }
}

export { FormFields }
export default FormFields