import React from 'react'
import { storiesOf } from '@storybook/react'
import JsonLd from '../../src/components/features/JsonLd'
import DebugForm from './FormDebug'
import FormEh from './FormEh'
import FormMinimal from './FormMinimal'
import AllInOneForm from './AllInOneForm/index'
import { FormView, exampleFormState } from './ExampleForm'

const state = new FormEh.FormState()

storiesOf('forms/Forms', module)
  .add('Example For With all types - AllInOneForm', () => {
    return <AllInOneForm />
  })
  .add('Example Form', () => <FormView />)
  .add('DebugForm', () => <DebugForm />)
  .add('FormMinimal', () => <FormMinimal />)
  .add('FormEh', () => <FormEh />)
  .add('FormEh - serialized', () => {
    return <FormEh shouldSerialize={true} state={state} />
  })
  .add('FormEh - observable-toJSON doubling as state-as-props', () => {
    return (
      <section>
        <header>serialized: </header>
        <JsonLd>{state.toJSON()}</JsonLd>
      </section>
    )
  })
  .add('FormEh - observable-serialized - as string', () => {
    return (
      <section>
        <header>stringified: </header>
        <JsonLd>{state.toSerialized()}</JsonLd>
      </section>
    )
  })