import { Story, Meta, html } from '@open-wc/demoing-storybook';
import { Required, MaxLength, loadDefaultFeedbackMessages } from '@lion/validate';
import '@lion/fieldset/lion-fieldset.js';
import '@lion/input/lion-input.js';
import '@lion/form/lion-form.js';

<Meta title="Forms/Form/Examples" parameters={{ component: 'lion-form' }} />

# Form Examples

A form can have multiple nested fieldsets.

<Story name="Default">
  {html`
    <lion-form id="form">
      <form>
        <lion-fieldset label="Personal data" name="personalData">
          <lion-fieldset label="Full Name" name="fullName">
            <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
            <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
          </lion-fieldset>
          <lion-fieldset label="Location" name="location">
            <lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
            <lion-input name="city" label="City" .modelValue=${'Amsterdam'}></lion-input>
          </lion-fieldset>
          <lion-input name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></lion-input>
        </lion-fieldset>
        <button type="button" @click=${() => console.log(document.querySelector('#form').serializeGroup())}>
          Log to Action Logger
        </button>
      </form>
    </lion-form>
  `}
</Story>

```html
<lion-form id="form">
  <form>
    <lion-fieldset label="Personal data" name="personalData">
      <lion-fieldset label="Full Name" name="fullName">
        <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
        <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
      </lion-fieldset>
      <lion-fieldset label="Location" name="location">
        <lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
        <lion-input name="city" label="City" .modelValue=${'Amsterdam'}></lion-input>
      </lion-fieldset>
      <lion-input name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></lion-input>
    </lion-fieldset>
    <button type="button" @click=${() => console.log(document.querySelector('#form').serializeGroup())}>
      Log to Action Logger
    </button>
  </form>
</lion-form>
```

## Form Submit / Reset

You can control whether a form gets submitted based on validation states.
Same thing goes for resetting the inputs to the original state.

<Story name="Submit/reset">
  {() => {
    loadDefaultFeedbackMessages();
    const submit = () => {
      const form = document.querySelector('#form2');
      if (!form.hasFeedbackFor.includes('error')) {
        console.log(form.serializeGroup());
        form.resetGroup();
      }
    };
    return html`
      <lion-form id="form2" @submit="${submit}"
        ><form>
          <lion-fieldset label="Name" name="name">
            <lion-input
              name="firstName"
              label="First Name"
              .validators=${[new Required(), new MaxLength(15)]}
            >
            </lion-input>
            <lion-input
              name="lastName"
              label="Last Name"
              .validators=${[new Required(), new MaxLength(15)]}
            >
            </lion-input>
          </lion-fieldset>
          <button type="submit">Submit & Reset (if successfully submitted)</button>
          <button type="button" @click=${() => document.querySelector('#form2').resetGroup()}>
            Reset
          </button>
          <p>
            A reset button should never be offered to users. This button is only used here to
            demonstrate the functionality.
          </p>
        </form></lion-form
      >
    `;
  }}
</Story>

```js
import { Required, MaxLength } from '@lion/validate'

const submit = () => {
  const form = document.querySelector('#form2');
  if (!form.hasFeedbackFor.includes('error')) {
    console.log(form.serializeGroup());
    form.resetGroup();
  }
};
```

```html
<lion-form id="form2" @submit="${submit}">
  <form>
    <lion-fieldset label="Name" name="name">
      <lion-input
        name="firstName"
        label="First Name"
        .validators=${[new Required(), new MaxLength(15)]}
      >
      </lion-input>
      <lion-input
        name="lastName"
        label="Last Name"
        .validators=${[new Required(), new MaxLength(15)]}
      >
      </lion-input>
    </lion-fieldset>
    <button type="submit">Submit & Reset (if successfully submitted)</button>
    <button type="button" @click=${() => console.log(document.querySelector('#form2'))}>
      Reset
    </button>
    <p>
      A reset button should never be offered to users. This button is only used here to
      demonstrate the functionality.
    </p>
  </form>
</lion-form>
```