import { Canvas, Meta, Story } from '@storybook/addon-docs';

import Field from './Field.svelte'
import FastForm from '../FastForm/FastForm.svelte'

<Meta title="Field/Field" component={FastForm} />

# Field



## Before we begin
`<Field />` is meant for selecting input types. The type of input must be specified, and you really need to wrap this within `<FastForm />` in order for us to manage your state. 

You have been warned! 
Please refer to the following documentations that may help you write the `<Field />` component.
- [FastForm documentation](?path=/story/fastform-fastform--page)
- [How to write validations](?path=/story/validators-validators--page)

## How to use `<Field />`

`<Field />` component is like an `<input />` field, it can take in any props, (class, id etc). In addition, table specifies the required and other fields that's unique to `<Field />` component

| Name | Required | Type | Default | Description |
| --- | --- | --- | --- | --- |
| **name** | **Yes** | String | - | Name for the is specific field |
| **type** | **Yes** | String | - | Specify the type of input field |
| **values** | **Yes*** | Array | - | Values required for specific components. *See Types of Field Table for special types
| **handleBlur** | No | Function | - | Instructions to be run onBlur, this function takes in an object that contains *`values`*, and *`errors`* object, and will trigger after validate function |
| **handleChange** | No | Function | - | Instructions to be run OnChange, this function takes in an object that contains *`values`*, and *`errors`* object, and will trigger after validate function|
| **validate** | No | Function | - | Any validators that is required to validate the *`<Field />`* component. Refer to validator docs on how to write your own validations|
| **validateOnBlur** | No | Boolean | `true` | Passed in validate function will run onBlur|
| **validateOnChange** | No | Boolean | `!validateOnBlur` | Passed in validate function will run onChange |


## Types of Field 

The types of the input field needs to be passed in to the `type` prop. You can pass it in like how you would specify in an HTML `<input />` field. But there are some special cases. 

| Types | Values Type | Example |
| --- | --- | --- |
| Regular types | - | `<Field name='password' type='password' />`|
| [multiselect](?path=/story/field-multi-select--multi-select)** | Array | `<Field name='iceCream' type='multiselect' values={['Vanilla', 'Chocolate', 'Cookies \'N Cream']} />` | 
| [radio](?path=/story/field-radio--radio)** | Array | `<Field name='iceCream' type='radio' values= {['Vanilla', 'Chocolate', 'Cookies \'N Cream']} />` | 
| [select](?path=/story/field-select--select)** | Array | `<Field name='iceCream' type = 'multiselect' values = {['Vanilla', 'Chocolate', 'Cookies \'N Cream']} />` |
| [checkbox](?path=/story/field-checkbox--checkbox)** | Array | `<Field name='iceCream' type='multiselect' values={['Vanilla', 'Chocolate', 'Cookies \'N Cream']} />` |
** Special input type that also require `values` prop to be passed in.
## Examples

Below is an example of a creating a checkbox component using vanilla Svelte.
```jsx
<script>
  const iceCreamSelection = ['Seaseme', 'Vanilla', 'Chocolate'];
  let fruitSelection = [];
  function handleBlur(){
    //handleBlur instructions here
  }
</script>
<input name='orderName' type='text' />
{#each iceCreamSelection as option}
  <input type='checkbox' value={option} bind:group={fruitSelection} onBlur={handleBlur} />
  <label for='selectFruit'>{option}</label>
{/each}
<button type='submit'>Submit!</button>
```

In comparison, below is an example if you were to write this using FastForm.
```jsx
<script>
  import { FastForm, Field } from '@fastform/form';
  const initValues = {
    iceCreamSelection: [];
  };
  function handleChange({values, errors}){
    //handleBlur instructions here
  }
</script>

<FastForm>
  <Field name='orderName' type='text' handleChange={handleChange} />
  <Field name='iceCreamSelection' type="checkbox" values={['Seaseme', 'Vanilla', 'Chocolate']} />
  <button type='submit'>Submit!</button>
</FastForm>
```