import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { ObserverInput, ObserverForm, FormState } from 'src/forms'
import { EditUserInput } from '../fixture'
import {
  EditUserFormWrapper,
  StyledSaveButton,
  StyledCancelButton,
} from './styled'

class FormStateCard extends FormState {
  inputsList = EditUserInput
}

const formStateCard = new FormStateCard()

const SubmitButton = props => <StyledSaveButton {...props} />
const CancelButton = props => <StyledCancelButton {...props} />

@observer
class EditUserForm extends ObserverForm {
  static FormState = formStateCard
  SubmitButton = SubmitButton
  CancelButton = CancelButton
  isCancelButtonNeeded = true
  defaultSubmitButtonLabel = 'Save Changes'
  defaultCancelButtonLabel = 'Cancel'

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

class EditUser extends React.Component {
  render() {
    return (
      <EditUserFormWrapper>
        <EditUserForm />
      </EditUserFormWrapper>
    )
  }
}

export { EditUser }
export default EditUser