import React from 'react'
import { FormEvent } from 'react'
import { ObserverInput, ObserverForm } from 'src/forms'
import { observer } from 'xmobx/mobx-react'
import {
  SubmitMultipleFormsButton,
  RemoveFormButton,
  AddFormButton,
  ValidateFormButton,
  PersistButton,
  RehydrateButton,
  StyledMultipleFormSection,
} from './styled'
import { ExampleFormState } from './FormState'
import { multipleFormState } from './state'

@observer
class FormView extends ObserverForm {
  //
}

const renderNestedForm = (state: any) => {
  /**
   * @note could pass in like `onAddForm` here...
   */
  return <FormView state={state} />
}

@observer
class MultipleFormView extends React.Component {
  /**
   * @note just for example to debug
   * @see http://localhost:9001/iframe.html?selectedKind=forms%2FMultipleForms&selectedStory=multiple%20forms
   */
  componentDidMount() {
    window.multipleFormState = multipleFormState
    window.multipleFormView = this
    if (process.env.NODE_ENV !== 'development') {
      throw new Error('do not keep this multiple form sate in production')
    }
  }

  handleSubmit = (event: FormEvent<any> | Event): void => {
    console.debug('[MultipleFormView] handleSubmit')
    event.preventDefault()

    if (multipleFormState.isValid) {
      const stringified = multipleFormState.toString()
      alert('eh ' + stringified)
    } else {
      alert('forms are not valid')
    }
  }

  handleRemoveFormItem = (event: FormEvent<any> | Event): void => {
    console.debug('[MultipleFormView] handleRemoveFormItem')
    event.preventDefault()

    multipleFormState.removeForm(multipleFormState.formList.length - 1)
  }

  handleAddFormItem = (event: FormEvent<any> | Event): void => {
    console.debug('[MultipleFormView] handleAddFormItem')
    event.preventDefault()

    const exampleFormState = new ExampleFormState()
    multipleFormState.addForm(exampleFormState)
  }

  handleValidate = (event: FormEvent<any> | Event): void => {
    console.debug('[MultipleFormView] handleValidate')
    event.preventDefault()

    const { isValid } = multipleFormState
    alert('isValid? ' + isValid)
  }

  handlePersist = (event: FormEvent<any> | Event): void => {
    console.debug('[MultipleFormView] handlePersist')
    event.preventDefault()

    multipleFormState.persist()
  }

  handleRehydrate = (event: FormEvent<any> | Event): void => {
    console.debug('[MultipleFormView] handleRehydrate')
    event.preventDefault()

    multipleFormState.rehydrate()
  }

  render() {
    console.debug('[MultipleFormView] render')

    const children = multipleFormState.formList.map(renderNestedForm)

    return (
      <StyledMultipleFormSection>
        {children}
        <SubmitMultipleFormsButton onClick={this.handleSubmit}>
          submit all forms
        </SubmitMultipleFormsButton>
        <RemoveFormButton onClick={this.handleRemoveFormItem}>
          remove last form
        </RemoveFormButton>
        <AddFormButton onClick={this.handleAddFormItem}>add form</AddFormButton>
        <ValidateFormButton onClick={this.handleValidate}>
          validate form
        </ValidateFormButton>
        <PersistButton onClick={this.handlePersist}>persist</PersistButton>
        <RehydrateButton onClick={this.handleRehydrate}>
          rehydrate
        </RehydrateButton>
      </StyledMultipleFormSection>
    )
  }
}

export { MultipleFormView }
export default MultipleFormView