import { Story, Meta, html, Preview } 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.

<Preview>
<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').serializedValue)}>
          Log to Action Logger
        </button>
      </form>
    </lion-form>
  `}
</Story>
</Preview>

## 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.

Be sure to call `serializedValue` when a you want to submit a form.
This value automatically filters out disabled children and makes sure the values
that are retrieved can be transmitted over a wire. (for instance, an input-date with a modelValue
of type `Date` will be serialized to an iso formatted string).


>  Note: Offering a reset button is a bad practice in terms of accessibility.
This button is only used here to demonstrate the `serializeGroup()` method.

<Preview>
<Story name="Submit/reset">
  {() => {
    loadDefaultFeedbackMessages();
    const submit = () => {
      const form = document.querySelector('#form2');
      if (!form.hasFeedbackFor.includes('error')) {
        document.getElementById('form2_output').innerText = JSON.stringify(form.serializedValue);
        document.querySelector('#form2').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-input
              name="address"
              disabled
              label="Address"
              .validators=${[new MaxLength(15)]}
            >
            </lion-input>
          </lion-fieldset>
          <button type="submit">Submit & Reset (if successfully submitted)</button>
          <button type="button" @click=${() => {
            document.querySelector('#form2').resetGroup();
            const form = document.querySelector('#form2');
            document.getElementById('form2_output').innerText = JSON.stringify(form.serializedValue);
          }}>
            reset
          </button>
          <pre id="form2_output">
          </pre>
        </form></lion-form
      >
    `;
  }}
</Story>
</Preview>



## Serialize in a multistep form

In a multistep form (consisting of multiple forms) it might be handy to wrap the serialized output
with the name of the form.

<Preview>
  <Story name="Multistep">
    {() => {
      loadDefaultFeedbackMessages();
      const serializeWithName = (formId, outputId) => {
        const form = document.getElementById(formId);
        if (!form.hasFeedbackFor.includes('error')) {
          const output = { [form.name]: form.serializedValue };
          document.getElementById(outputId).innerText = JSON.stringify(output);
        }
      };
      return html`
        <lion-form name="step1FormName" id="form3"><form>
          <lion-input name="step1InputName" label="Step 1 Input"></lion-input>
          <button @click="${() => serializeWithName('form3', 'form3_output')}">
            serialize step 1 with name
          </button>
          <pre id="form3_output"></pre>
        </form></lion-form>
        <lion-form name="step2FormName" id="form4"><form>
          <lion-input name="step2InputName" label="Step 2 Input"></lion-input>
          <button @click="${() => serializeWithName('form4', 'form4_output')}">
            serialize step 2 with name
          </button>
          <pre id="form4_output"></pre>
        </form></lion-form>
      `;
    }}
  </Story>
</Preview>