import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'

import CheckBox from '../../checkbox'
import ContentArea from '../../content-area'
import Form from '../form'
import FormEmailField from '../form-email-field'
import FormPhoneField from '../form-phone-field'
import FormTextField from '../form-text-field'
import FormTextAreaField from '../form-textarea-field'
import LaunchModal from '../../modal' 

<Meta title="Design System/Components/Form/Form WIP" />

# Form

## Preview

<Preview>
  <Story name="Form WIP">
    <ContentArea className="h-screen">
      <LaunchModal
        className="p-2"
        launchText="Contact Us"
        button={true}
        title="Contact Us"
      >
        <Form className="w-full flex flex-wrap mb-3" id="form-example" valid={true} submitCallback={() => {console.log('submitted')}}>
          <div className="w-full">
            <FormTextField
              className=""
              id="first"
              label="First Name"
              name="First Name"
              setValid={(valid) => valid}
              setValue={(value) => value}
            />
          </div>
          <div className="w-full">
            <FormTextField
              className=""
              id="last"
              label="Last Name"
              name="Last Name"
              setValid={(valid) => valid}
              setValue={(value) => value}
            />
          </div>
          <div className="w-full">
            <FormPhoneField
              className=""
              id="phone"
              label="Phone"
              name="Phone"
              setValid={(valid) => valid}
              setValue={(value) => value}
            />
          </div>
          <div className="w-full">
            <FormEmailField
              className=""
              id="email"
              invalidMessage="Email is invalid."
              label="Email"
              name="Email"
              optional={true}
              setValid={(valid) => valid}
              setValue={(value) => value}
            />
          </div>
          <div className="w-full">
            <FormTextAreaField
              className=""
              id="message"
              label="Message"
              name="Message"
              optional={true}
              setValid={(valid) => valid}
              setValue={(value) => value}
            />
          </div>
          <div className="w-full mt-3">
            <CheckBox
              className=""
              id="checkbox"
            >
              Accept?
            </CheckBox>
          </div>
        </Form>
      </LaunchModal>
    </ContentArea>
  </Story>
</Preview>

## Props

<Props of={FormTextField} />