{
  name: "Demo form",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <h1 style="margin-bottom: 32px">Demo form</h1>

      <form id="form1">
        <oc-text-field-v1
          name="first-name"
          placeholder="Max"
          minlength="3"
          value=""
          hint="First part of your name"
          >First Name</oc-text-field-v1
        >

        <oc-text-field-v1
          name="last-name"
          placeholder="Mustermann"
          maxlength="50"
          hint="Last part of your name"
          >Last Name</oc-text-field-v1
        >

        <oc-text-field-v1 name="email" type="email" placeholder="foo@bar.de" required
          >E-Mail</oc-text-field-v1
        >

        <oc-text-field-v1 name="size" type="integer" suffix-text="cm">Size</oc-text-field-v1>

        <oc-text-field-v1 name="money" type="decimal" suffix-icon="euro">Money</oc-text-field-v1>

        <div class="buttons">
          <oc-button-v1 type="reset" variant="secondary">Reset</oc-button-v1>
          <oc-button-v1 type="submit">Submit</oc-button-v1>
        </div>
      </form>

      <script>
        (() => {
          const [form] = document.getElementsByTagName("form");

          form.addEventListener("submit", (ev) => {
            let formData = new FormData(form);
            let data = "";
            formData.forEach((value, key) => (data += key + "=" + value + "\\n"));
            console.log(data);
            alert("sending:\\n" + data);
            ev.preventDefault();
          });
        })();
      </script>

      <style>
        form {
          display: flex;
          flex-direction: column;
          gap: 24px;
        }

        .buttons {
          display: flex;
          gap: 16px;
        }
      </style>
    `;
  }
}

{
  name: "Demo autocomplete",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <h1 style="margin-bottom: 32px">Autocomplete</h1>

      <form>
        <oc-text-field-v1 name="name" placeholder="Max Mustermann" autocomplete="name"
          >Full Name
        </oc-text-field-v1>

        <oc-text-field-v1 name="last-name" placeholder="Mustermann" autocomplete="family-name"
          >Last Name
        </oc-text-field-v1>

        <oc-text-field-v1 name="first-name" placeholder="Max" autocomplete="given-name"
          >First Name
        </oc-text-field-v1>

        <oc-text-field-v1 name="email" type="email" autocomplete="email">E-Mail</oc-text-field-v1>

        <oc-text-field-v1 name="tel" type="tel" autocomplete="tel">Phone number</oc-text-field-v1>

        <oc-text-field-v1 name="country" autocomplete="country">Country</oc-text-field-v1>

        <oc-text-field-v1 name="postal-code" autocomplete="postal-code"
          >postal-code
        </oc-text-field-v1>

        <oc-text-field-v1 name="street-address" autocomplete="street-address"
          >street-address
        </oc-text-field-v1>

        <oc-text-field-v1 name="address-line1" autocomplete="address-line1"
          >address-line1
        </oc-text-field-v1>

        <div class="buttons">
          <oc-button-v1 type="reset" variant="secondary">Reset</oc-button-v1>
        </div>
      </form>

      <style>
        form {
          display: flex;
          flex-direction: column;
          gap: 24px;
        }

        .buttons {
          display: flex;
          gap: 16px;
        }
      </style>
    `;
  }
}

{
  name: "Demo birthday",
  parameters: {
    controls: {
      disabled: true
    },
    chromatic: {
      disableSnapshot: true,
      hideInChromatic: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <h1 style="margin-bottom: 32px">Birthday</h1>
      <p>
        This story demonstrates a birthday input using three separate Text Fields for day, month,
        and year with appropriate attributes for each field.
      </p>

      <p>
        Note that this is just a visual demo. In a real-world application, additional logic would be
        needed to validate the combined date input.
      </p>

      <p>
        Values are restricted using the <code>min</code> and <code>max</code> attributes to ensure
        valid date components.
      </p>

      <div style="margin-bottom: 16px">
        <ul class="oc-list--unordered">
          <li><strong>Day:</strong> <code>min="1", max="31", maxlength="2"</code></li>
          <li><strong>Month:</strong> <code>min="1", max="12", maxlength="2"</code></li>
          <li><strong>Year:</strong> <code>min="1900", max="2025", maxlength="4"</code></li>
        </ul>
      </div>

      <div style="display: flex; gap: 16px">
        <oc-text-field-v1
          name="day"
          placeholder="DD"
          type="integer"
          min="1"
          max="31"
          maxlength="2"
          style="flex-shrink: 0; width: 60px"
          hide-counter
          >Day
        </oc-text-field-v1>
        <oc-text-field-v1
          name="month"
          placeholder="MM"
          type="integer"
          min="1"
          max="12"
          maxlength="2"
          style="flex-shrink: 0; width: 80px"
          hide-counter
          >Month
        </oc-text-field-v1>
        <oc-text-field-v1
          name="year"
          placeholder="YYYY"
          type="integer"
          min="1900"
          max="2025"
          maxlength="4"
          style="flex-shrink: 0; width: 80px"
          hide-counter
          >Year
        </oc-text-field-v1>
      </div>

      <style>
        form {
          display: flex;
          flex-direction: column;
          gap: 24px;
        }

        .buttons {
          display: flex;
          gap: 16px;
        }
      </style>
    `;
  }
}

{
  name: "Demo inputmode",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <h1 style="margin-bottom: 32px">Inputmode</h1>

      <form>
        <oc-text-field-v1 placeholder="Text" inputmode="text">Text </oc-text-field-v1>

        <oc-text-field-v1 placeholder="Numeric" inputmode="numeric">Numeric </oc-text-field-v1>

        <oc-text-field-v1 placeholder="Decimal" inputmode="decimal">Decimal </oc-text-field-v1>

        <oc-text-field-v1 type="email" inputmode="email">E-Mail</oc-text-field-v1>

        <oc-text-field-v1 type="tel" inputmode="tel">Phone number</oc-text-field-v1>

        <oc-text-field-v1 type="url" inputmode="url">URL</oc-text-field-v1>

        <oc-text-field-v1 type="search" inputmode="search">Search </oc-text-field-v1>
      </form>

      <style>
        form {
          display: flex;
          flex-direction: column;
          gap: 24px;
        }

        .buttons {
          display: flex;
          gap: 16px;
        }
      </style>
    `;
  }
}

{
  render() {
    return html`
      <form>
        <oc-text-field-v1 name="name">{Enter}</oc-text-field-v1>
        <button type="submit"></button>
      </form>
    `;
  },
  async play({
    canvasElement
  }) {
    canvasElement.getElementsByTagName("form").item(0)!.addEventListener("submit", ev => ev.preventDefault());
    const textField = canvasElement.getElementsByTagName("oc-text-field-v1").item(0)!;
    let fired = 0;
    textField.addEventListener("keydown", () => fired += 1);
    await userEvent.type(textField.shadowRoot!.querySelector("input")!, "{Enter}");
    await expect(fired, "keydown should be fired one time").toBe(1);
  }
}

{
  render() {
    return html`
      <form id="form1">
        <oc-text-field-v1 name="name">{Enter}</oc-text-field-v1>
        <button type="submit" data-should-submit></button>
        <button type="submit" data-should-not-submit></button>
      </form>

      <form id="form2">
        <oc-text-field-v1 name="name">{Enter}</oc-text-field-v1>
        <input type="submit" data-should-submit />
        <button type="submit" data-should-not-submit></button>
      </form>

      <form id="form3">
        <oc-text-field-v1 name="name">{Enter}</oc-text-field-v1>
        Should submit the form
      </form>

      <form id="form4">Should submit the form</form>
      <oc-text-field-v1 name="name" form="form4">{Enter}</oc-text-field-v1>

      <form id="form5">
        <button type="submit" data-should-submit></button>
        <button type="submit" data-should-not-submit></button>
      </form>
      <oc-text-field-v1 name="name" form="form5">{Enter}</oc-text-field-v1>

      <form id="form6">
        <input type="submit" data-should-submit />
        <button type="submit" data-should-not-submit></button>
      </form>
      <oc-text-field-v1 name="name" form="form6">{Enter}</oc-text-field-v1>

      <form id="form7">
        <oc-text-field-v1 name="name">{Enter}</oc-text-field-v1>
        <button type="submit" disabled data-should-not-submit></button>
        <button type="submit" data-should-not-submit></button>
      </form>

      <form id="form8">
        <oc-text-field-v1 name="name">{Enter}</oc-text-field-v1>
        <input type="submit" disabled data-should-not-submit />
        <input type="submit" data-should-not-submit />
      </form>
    `;
  },
  async play({
    canvasElement
  }) {
    const submits: {
      form: string;
      submitter: HTMLElement | null;
    }[] = [];
    canvasElement.querySelectorAll("form").forEach(form => form.addEventListener("submit", ev => {
      ev.preventDefault();
      submits.push({
        form: form.id,
        submitter: ev.submitter
      });
    }));
    const textFields = Array.from(canvasElement.querySelectorAll(`oc-text-field-v1[name="name"]`)) as (HTMLOcTextFieldV1Element & {
      internals: ElementInternals;
    })[];
    const shadowInputs = textFields.map(oc => oc.shadowRoot!.querySelector("input")!);
    for (let i = 0; i < textFields.length; i += 1) {
      const textField = textFields[i];
      // eslint-disable-next-line no-await-in-loop
      await expect(textField.internals.form?.id, "text field should have correct associated form").toBe(`form${i + 1}`);
    }

    // eslint-disable-next-line no-restricted-syntax
    for (const input of shadowInputs) {
      // eslint-disable-next-line no-await-in-loop
      await userEvent.type(input, "{Enter}");
    }
    await expect(submits.length, "number of submits").toBe(6);
    await expect(submits[0].form).toBe("form1");
    await expect(submits[0].submitter?.dataset.shouldSubmit).toBeDefined();
    await expect(submits[1].form).toBe("form2");
    await expect(submits[1].submitter?.dataset.shouldSubmit).toBeDefined();
    await expect(submits[2].form).toBe("form3");
    await expect(submits[2].submitter).toBe(null);
    await expect(submits[3].form).toBe("form4");
    await expect(submits[3].submitter).toBe(null);
    await expect(submits[4].form).toBe("form5");
    await expect(submits[4].submitter?.dataset.shouldSubmit).toBeDefined();
    await expect(submits[5].form).toBe("form6");
    await expect(submits[5].submitter?.dataset.shouldSubmit).toBeDefined();
  }
}

{
  render() {
    return html` <form>
      <oc-text-field-v1 name="key1" value="value 1">label 1</oc-text-field-v1>
      <oc-text-field-v1 name="key2" value="value 2">label 2</oc-text-field-v1>
      <oc-text-field-v1 name="key3">label 3</oc-text-field-v1>
      <button type="reset">Reset</button>
    </form>`;
  },
  async play({
    canvasElement
  }) {
    const [textField1, textField2, textField3] = Array.from(canvasElement.querySelectorAll("oc-text-field-v1"));
    const [input1, input2, input3] = deepQuerySelectorAll(canvasElement, ".text-field__input");
    await userEvent.type(input1, " foo");
    await userEvent.type(input2, " bar");
    await userEvent.type(input3, "foo bar");
    const button = canvasElement.querySelector("button") as HTMLButtonElement;
    await expect(textField1.value).toBe("value 1 foo");
    await expect(textField2.value).toBe("value 2 bar");
    await expect(textField3.value).toBe("foo bar");
    await fireEvent.click(button);
    await expect(textField1.value).toBe("value 1");
    await expect(textField2.value).toBe("value 2");
    await expect(textField3.value).toBe("");
  }
}

{
  render() {
    return html` <form>
      <oc-text-field-v1 name="key1">label 1</oc-text-field-v1>
      <oc-text-field-v1 name="key2">label 2</oc-text-field-v1>
      <oc-text-field-v1 name="key3">label 3</oc-text-field-v1>
      <oc-text-field-v1 name="key4" value="I am disabled" disabled>label 4</oc-text-field-v1>
      <button type="submit">submit</button>
    </form>`;
  },
  async play({
    canvasElement
  }) {
    const [input1, input2, input3] = deepQuerySelectorAll(canvasElement, ".text-field__input");
    await userEvent.type(input1, "foo");
    await userEvent.type(input2, "bar");
    await userEvent.type(input3, "foo bar");
    const form = canvasElement.querySelector("form") as HTMLFormElement;
    let formData = {};
    form.addEventListener("submit", ev => {
      ev.preventDefault();
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      formData = Object.fromEntries(new FormData(form).entries());
    });
    const button = canvasElement.querySelector("button") as HTMLButtonElement;
    await fireEvent.click(button);
    await expect(formData).toStrictEqual({
      key1: "foo",
      key2: "bar",
      key3: "foo bar"
    });
  }
}

{
  parameters: {
    chromatic: {
      disableSnapshot: true
    }
  },
  render() {
    return html`
      <oc-text-field-v1>no defaults set</oc-text-field-v1>
      <oc-text-field-v1 value="test">Test Label</oc-text-field-v1>
    `;
  },
  async play({
    canvasElement
  }) {
    const [sutWithoutAttributes, sutWithAttributes] = Array.from(canvasElement.getElementsByTagName("oc-text-field-v1")) as (HTMLOcTextFieldV1Element & {
      defaultChecked: boolean;
      defaultValue: string;
    })[];

    // TEST sutWithoutAttributes
    await expect(sutWithoutAttributes.value).toBe("");
    await expect(sutWithoutAttributes.defaultValue).toBe("");
    await expect(sutWithoutAttributes.hasAttribute("value")).toBeFalsy();
    sutWithoutAttributes.value = "new on";
    await expect(sutWithoutAttributes.value).toBe("new on");
    await expect(sutWithoutAttributes.defaultValue).toBe("");
    await expect(sutWithoutAttributes.hasAttribute("value")).toBeFalsy();

    // TEST sutWithAttributes
    await expect(sutWithAttributes.value).toBe("test");
    await expect(sutWithAttributes.defaultValue).toBe("test");
    await expect(sutWithAttributes.getAttribute("value")).toBe("test");
    sutWithAttributes.value = "new test";
    await expect(sutWithAttributes.value).toBe("new test");
    await expect(sutWithAttributes.defaultValue).toBe("test");
    await expect(sutWithAttributes.getAttribute("value")).toBe("test");

    // TEST programmatic created
    const sutCreated = document.createElement("oc-text-field-v1") as HTMLOcTextFieldV1Element & {
      defaultValue: string;
    };
    sutCreated.innerText = "created";
    sutCreated.value = "foo";
    canvasElement.append(sutCreated);
    await expect(sutCreated.value).toBe("foo");
    await expect(sutCreated.defaultValue).toBe("");
    await expect(sutCreated.hasAttribute("value")).toBeFalsy();
    sutCreated.defaultValue = "foo value";
    await expect(sutCreated.value).toBe("foo value");
    await expect(sutCreated.defaultValue).toBe("foo value");
    await expect(sutCreated.getAttribute("value")).toBe("foo value");
  }
}

{
  name: "Birthday: valid inputs",
  parameters: {
    controls: {
      disabled: true
    }
  },
  render: renderBirthday,
  async play({
    canvasElement
  }) {
    const [day, month, year] = deepQuerySelectorAll(canvasElement, ".text-field__input") as HTMLInputElement[];
    const microtask = () => new Promise(r => setTimeout(r, 0));
    const clearAndType = async (el: HTMLInputElement, text: string) => {
      el.focus();
      await userEvent.keyboard("{Control>}a{/Control}{Backspace}");
      await microtask();
      await userEvent.type(el, text);
    };
    await clearAndType(day, "01");
    await microtask();
    await userEvent.tab();
    await clearAndType(month, "01");
    await microtask();
    await userEvent.tab();
    await clearAndType(year, "2000");
    await microtask();
    await expect(day.value).toBe("01");
    await expect(month.value).toBe("01");
    await expect(year.value).toBe("2000");
    await clearAndType(day, "31");
    await microtask();
    await userEvent.tab();
    await clearAndType(month, "12");
    await microtask();
    await userEvent.tab();
    await clearAndType(year, "1999");
    await microtask();
    await expect(day.value).toBe("31");
    await expect(month.value).toBe("12");
    await expect(year.value).toBe("1999");
  }
}

{
  name: "Birthday: non-digits",
  parameters: {
    controls: {
      disabled: true
    }
  },
  render: renderBirthday,
  async play({
    canvasElement
  }) {
    const [day, month, year] = deepQuerySelectorAll(canvasElement, ".text-field__input") as HTMLInputElement[];
    const microtask = () => new Promise(r => setTimeout(r, 0));
    const clearAndType = async (el: HTMLInputElement, text: string) => {
      el.focus();
      await userEvent.keyboard("{Control>}a{/Control}{Backspace}");
      await microtask();
      await userEvent.type(el, text);
    };
    await clearAndType(day, "a");
    await microtask();
    await expect(day.value).toBe("");
    await clearAndType(month, "1b");
    await microtask();
    await expect(month.value).toBe("1");
    await clearAndType(year, "19c9");
    await microtask();
    await expect(year.value).toBe("199");
  }
}

{
  name: "Demo form",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <h1 style="margin-bottom: 32px">Demo Form</h1>

      <form id="form1">
        <oc-text-area-v1
          name="rating"
          placeholder="please be kind :)"
          maxlength="4000"
          hint="Rate the product"
          required
          >Rating</oc-text-area-v1
        >

        <div class="buttons">
          <oc-button-v1 type="reset" variant="secondary">Reset</oc-button-v1>
          <oc-button-v1 type="submit">Submit</oc-button-v1>
        </div>
      </form>

      <script>
        (() => {
          const form = document.getElementById("form1");

          form.addEventListener("submit", (ev) => {
            let formData = new FormData(form);
            let data = "";
            formData.forEach((value, key) => (data += key + "=" + value + "\\n"));
            console.log(data);
            alert("sending:\\n" + data);
            ev.preventDefault();
          });
        })();
      </script>

      <style>
        form {
          display: flex;
          flex-direction: column;
          gap: 24px;
        }

        .buttons {
          display: flex;
          gap: 16px;
        }
      </style>
    `;
  }
}

{
  render() {
    return html` <form>
      <oc-text-area-v1 name="key1">label 1</oc-text-area-v1>
      <oc-text-area-v1 name="key2">label 2</oc-text-area-v1>
      <oc-text-area-v1 name="key3">label 3</oc-text-area-v1>
      <oc-text-area-v1 name="key4" value="I am disabled" disabled>label 4</oc-text-area-v1>
      <oc-button-v1 type="submit">Submit</oc-button-v1>
    </form>`;
  },
  async play({
    canvasElement
  }) {
    await macrotasks();
    const [input1, input2, input3] = deepQuerySelectorAll(canvasElement, ".text-area__input");
    await userEvent.type(input1, "foo");
    await userEvent.type(input2, "bar");
    await userEvent.type(input3, "foo bar");
    const form = canvasElement.querySelector("form") as HTMLFormElement;
    let formData = undefined;
    form.addEventListener("submit", ev => {
      ev.preventDefault();
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      formData = Object.fromEntries(new FormData(form).entries());
    });
    const [button] = deepQuerySelectorAll(canvasElement, "button");
    await userEvent.click(button);
    await macrotasks();
    await expect(formData).toStrictEqual({
      key1: "foo",
      key2: "bar",
      key3: "foo bar"
    });
  }
}