import { pipe } from "@hesxenon/prelude/Function.js";
import {
  describe,
  each,
  expect,
  getFormValues,
  it,
  queryByRole,
  render,
  renderAsync,
  select,
  selectAll,
  trapEvents,
  user,
  waitFor,
  waitForEvent,
} from "../../utils/Test";

const getVisibleText = (input: UwcInputElement) => {
  const placeholder = select(input, "div[part=placeholder]");
  const values = select(input, "ul[part=values]");
  const element = select(input, "div[part=root]");
  return placeholder.checkVisibility({ visibilityProperty: true })
    ? placeholder.innerText
    : (values.checkVisibility() ? values.innerText : "") + element.innerText;
};

const getInput = (within: Element) => select(within, "uwc-input");
const getSuggestion = (within: Element, count: number) =>
  select(
    within,
    `dialog[popover] :where(li, [data-value]):nth-child(${count})`,
  );
const getCurrentSuggestion = (within: Element) =>
  within.querySelector("[aria-current]");

const setup = <const Key extends PropertyKey>(
  inputs: Record<Key, Omit<JSX.Attributes<UwcInputElement>, "name">>,
) => {
  if (Object.keys(inputs).length === 0) {
    Object.assign(inputs, { input: {} });
  }
  type Inputs = Key extends never
    ? { input: UwcInputElement }
    : { [name in Key]: UwcInputElement };
  const page = render(
    <form>
      {Object.entries(inputs).map(([name, input]) => (
        <uwc-input
          name={name}
          {...(input as JSX.Attributes<UwcInputElement>)}
        ></uwc-input>
      ))}
    </form>,
  );

  const form = select(page, "form");
  const inputElements = selectAll(page, "uwc-input").reduce((inputs, input) => {
    inputs[input.name as keyof Inputs] = input as Inputs[keyof Inputs];
    return inputs;
  }, {} as Inputs);

  return {
    ...inputElements,
    form,
    page,
  };
};

describe("uwc-input[type=text]", () => {
  it("should start with an empty value", () => {
    const page = render(<uwc-input></uwc-input>);
    expect(select(page, "uwc-input").value).to.eq("");
  });

  it("should render a placeholder when empty", () => {
    const page = render(<uwc-input></uwc-input>);
    const placeholder = select(page, "[part=placeholder]");
    expect(window.getComputedStyle(placeholder).visibility).to.eq("visible");
  });

  it("should not render a placeholder when filled out", () => {
    const page = render(<uwc-input value="foo" placeholder="bar"></uwc-input>);
    const placeholder = select(page, "[part=placeholder]");
    expect(window.getComputedStyle(placeholder).visibility).to.eq("hidden");
  });

  it("should add all values to its formdata if [multiple]", async () => {
    const page = render(
      <form>
        <uwc-input name="foo" value="foo" multiple>
          <ul part="values">
            <li>A</li>
          </ul>
        </uwc-input>
      </form>,
    );

    expect(getFormValues(select(page, "form"))).to.deep.eq({
      foo: ["A", "foo"],
    });
  });

  it("should update formdata when IDL value is set", () => {
    const page = render(
      <form>
        <uwc-input name="foo"></uwc-input>
      </form>,
    );

    const input = select(page, "uwc-input");

    input.value = "foo";

    expect(getFormValues(select(page, "form"))).to.deep.eq({ foo: "foo" });
  });

  it("should sync formdata when the name changes", async () => {
    const page = render(
      <form>
        <uwc-input name="foo" value="bar" />
      </form>,
    );
    const form = select(page, "form");
    const input = select(form, "uwc-input");

    input.name = "baz";

    await waitFor(() => expect(getFormValues(form)).to.deep.eq({ baz: "bar" }));
  });

  it("should focus on mousedown", async () => {
    const page = render(<uwc-input></uwc-input>);

    const input = select(page, "uwc-input");

    await user.pointer({ keys: "[MouseLeft>]", target: input });

    await waitFor(() => expect(input).to.match(":focus-within"));
  });

  it("should not focus when mousedown is prevented", async () => {
    const page = render(
      <uwc-input onmousedown="event.preventDefault();"></uwc-input>,
    );

    const input = select(page, "uwc-input");

    await user.click(input);

    expect(input).to.not.match(":focus-within");
  });

  it("should not be possible to focus when disabled", async () => {
    const page = render(<uwc-input disabled></uwc-input>);
    const input = select(page, "uwc-input");
    await expect(user.click(input)).to.eventually.be.rejected;
  });

  it("should be possible to change the placeholder", () => {
    const page = render(<uwc-input placeholder="foo"></uwc-input>);
    const input = select(page, "uwc-input");
    input.placeholder = "bar";
    expect(getVisibleText(input)).to.eq("bar");
  });

  it("should not be possible to insert line breaks via enter key", async () => {
    const page = render(<uwc-input></uwc-input>);
    const input = select(page, "uwc-input");
    await user.type(input, "ab{Enter}cd");
    expect(input.value).to.eq("abcd");
  });

  it("should be possible to change the value programmatically", () => {
    const page = render(<uwc-input></uwc-input>);
    const input = select(page, "uwc-input");
    input.value = "foo";
    expect(getVisibleText(input)).to.eq("foo");
  });

  it("should sync an updated content value to its formdata", async () => {
    const page = render(
      <form>
        <uwc-input name="foo" value="bar"></uwc-input>
      </form>,
    );
    const form = select(page, "form");
    const input = select(form, "uwc-input");
    await waitFor(() =>
      expect(getFormValues(form)).to.deep.equal({ foo: "bar" }),
    );
    input.setAttribute("value", "baz");
    await waitFor(() =>
      expect(getFormValues(form)).to.deep.equal({ foo: "baz" }),
    );
  });

  it("should sync an updated idl value to its formdata", async () => {
    const page = render(
      <form>
        <uwc-input name="foo" value="bar"></uwc-input>
      </form>,
    );
    const form = select(page, "form");
    const input = select(form, "uwc-input");
    await waitFor(() => expect(getFormValues(form)).to.deep.eq({ foo: "bar" }));
    input.value = "baz";
    await waitFor(() => expect(getFormValues(form)).to.deep.eq({ foo: "baz" }));
  });

  it("should open the popover if focused", async () => {
    const page = render(
      <uwc-input>
        <dialog popover>
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>
        </dialog>
      </uwc-input>,
    );
    const input = select(page, "uwc-input");
    const popover = select(page, "dialog");

    expect(popover.checkVisibility()).to.eq(false);

    await user.click(input);

    expect(popover.checkVisibility()).to.eq(true);
  });

  it("the popover should not close if clicked inside without selecting a ValueElement", async () => {
    const page = render(
      <uwc-input>
        <dialog popover>
          <div>Something to select that isn't a ValueElement</div>
        </dialog>
      </uwc-input>,
    );
    const input = select(page, "uwc-input");
    const popover = select(page, "dialog");
    const nonValueElement = select(page, "div");

    expect(popover.checkVisibility()).to.eq(false);

    await user.click(input);
    expect(popover.checkVisibility()).to.eq(true, "popover never opened");

    await user.click(nonValueElement);
    expect(popover.checkVisibility()).to.eq(
      true,
      "popover was closed unexpectedly",
    );
  });

  it("the popover should close on selection if not [multiple]", async () => {
    const page = render(
      <uwc-input>
        <dialog popover>
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>
        </dialog>
      </uwc-input>,
    );
    const input = select(page, "uwc-input");
    const popover = select(page, "dialog");
    const firstOption = select(page, "li");

    await user.click(input);
    expect(popover.checkVisibility()).to.eq(true);
    await user.click(firstOption);
    expect(popover.checkVisibility()).to.eq(false);
  });

  it("should clear aria-current from the selected suggestion", async () => {
    const page = render(
      <uwc-input>
        <dialog popover>
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>
        </dialog>
      </uwc-input>,
    );
    const input = select(page, "uwc-input");
    const firstOption = select(page, "li");

    await user.click(input);
    await user.click(firstOption);
    expect(firstOption).to.not.have.attribute("aria-current", "true");
    expect(select(page, "ul[part=values] [data-value]")).to.not.have.attribute(
      "aria-current",
      "true",
    );
  });

  it("slotting the [data-value] attribute should fall back to the retrieved ValueElement.content", async () => {
    const page = render(
      <uwc-input>
        <ul part="values">
          <template>
            <div class="pill" data-slot-attributes="data-value"></div>
          </template>
        </ul>
        <dialog popover>
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>
        </dialog>
      </uwc-input>,
    );
    const input = select(page, "uwc-input");
    const firstOption = select(page, "li");

    await user.click(input);
    await user.click(firstOption);
    expect(select(page, "ul[part=values] div.pill")).to.have.attribute(
      "data-value",
      "A",
    );
  });

  it("should reflect selected values in ul[part=values]", async () => {
    const page = render(
      <uwc-input>
        <dialog popover>
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>
        </dialog>
      </uwc-input>,
    );
    const input = select(page, "uwc-input");
    const firstOption = select(page, "li");

    await user.click(input);
    await user.click(firstOption);

    expect(input.querySelector("ul[part=values] li")).to.exist.and.to.have.text(
      "A",
    );
  });

  it("should add ValueElements to the selected list if their [aria-selected] changes", async () => {
    const page = render(
      <uwc-input>
        <dialog popover>
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>
        </dialog>
      </uwc-input>,
    );

    const input = select(page, "uwc-input");
    const firstOption = select(page, "li");

    firstOption.setAttribute("aria-selected", "true");

    await waitFor(() => expect(input.selected).to.contain("A"));
  });

  it("should not close if selecting something in the popover when [multiple] true", async () => {
    const page = render(
      <uwc-input multiple>
        <dialog popover>
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>
        </dialog>
      </uwc-input>,
    );
    const input = select(page, "uwc-input");
    const popover = select(page, "dialog");
    const firstOption = select(page, "li");

    await user.click(input);
    expect(popover.checkVisibility()).to.eq(true);
    await user.click(firstOption);
    expect(popover.checkVisibility()).to.eq(true);
  });

  it("should be possible to select anything in the popover that matches :where(li, [data-value])", async () => {
    const page = render(
      <uwc-input>
        <dialog popover>
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>
        </dialog>
      </uwc-input>,
    );
    const input = select(page, "uwc-input");
    const firstOption = select(page, "li");

    await user.click(input);
    await user.click(firstOption);

    expect(input.selected).to.deep.eq(["A"]);
  });

  it("should add the value from the nearest click target that matches ':is(li, [data-value])'", async () => {
    const page = render(
      <uwc-input>
        <dialog popover>
          <ul>
            <li>List Element</li>
            <li>
              <div data-value="wrapped">
                <span>Wrapped</span>
              </div>
            </li>
          </ul>
        </dialog>
      </uwc-input>,
    );
    const input = select(page, "uwc-input");
    await user.click(input);
    await user.click(select(input, "li"));
    expect(input.selected).to.deep.eq(["List Element"]);
    await user.click(input);
    await user.click(select(input, "span"));
    expect(input.selected).to.deep.eq(["wrapped"]);
  });

  it("should replace the templates slots with the respective attributes", async () => {
    const page = render(
      <uwc-input multiple>
        <ul>
          <template>
            <li>
              <slot />
            </li>
          </template>
        </ul>
        <dialog popover>
          <ul>
            <li>first</li>
            <li>second</li>
          </ul>
        </dialog>
      </uwc-input>,
    );
    await user.click(select(page, "uwc-input"));
    await user.click(select(page, "dialog ul li"));
    expect(select(page, "ul:not(template) li").textContent).to.eq("first");
  });

  it("should be possible to provide an initially selected value", () => {
    const page = render(
      <uwc-input>
        <ul part="values">
          <li data-value="SOME_VALUE">some value</li>
        </ul>
      </uwc-input>,
    );
    const input = select(page, "uwc-input");

    expect(getVisibleText(input)).to.eq("some value");
    expect(Array.from(input.selected)).to.deep.eq(["SOME_VALUE"]);
  });

  it("should only include the selected value if not multiple", async () => {
    const page = render(
      <form>
        <uwc-input name="foo">
          <dialog popover>
            <ul>
              <li data-value="a">A</li>
              <li>B</li>
              <li>C</li>
            </ul>
          </dialog>
        </uwc-input>
      </form>,
    );
    const form = select(page, "form");
    const input = select(page, "uwc-input");
    const firstOption = select(page, "li");

    await user.click(input);
    await user.click(firstOption);

    expect(getVisibleText(input)).to.eq("A");
    expect(input.selected).to.deep.eq(["a"]);
    expect(getFormValues(form)).to.deep.eq({ foo: "a" });
  });

  it("should have the typed text as value if typing after a selection and not [multiple]", async () => {
    const page = render(
      <uwc-input>
        <dialog popover>
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>
        </dialog>
      </uwc-input>,
    );
    const input = select(page, "uwc-input");
    const firstOption = select(page, "li");

    await user.click(input);
    await user.click(firstOption);
    await user.type(input, "foo");

    expect(getVisibleText(input)).to.eq("foo");
    expect(input.value).to.eq("foo");
    expect(input.selected).to.deep.eq([]);
  });

  it("should have no .selected if :not([multiple]) and .value is not empty", () => {
    const page = render(
      <uwc-input value="foo">
        <ul part="values">
          <ul>
            <li>A</li>
          </ul>
        </ul>
      </uwc-input>,
    );

    expect(getVisibleText(getInput(page))).to.eq("foo");
    expect(getInput(page)).to.deep.include({
      value: "foo",
      selected: [],
    });
  });

  it("should not be possible to change the value through interaction when [readonly]", async () => {
    const page = render(
      <uwc-input readonly>
        <dialog popover>
          <ul>
            <li>Foo</li>
          </ul>
        </dialog>
      </uwc-input>,
    );
    const input = select(page, "uwc-input");

    await user.type(input, "foo");
    await user.click(input);
    await user.click(select(input, "li"));

    expect(getVisibleText(input)).to.eq("");
    expect(input.value).to.eq("");
    expect(input.selected).to.deep.eq([]);
  });

  it("should be possible to clear the input", async () => {
    const page = render(
      <form>
        <uwc-input name="foo" value="foo"></uwc-input>
      </form>,
    );
    const form = select(page, "form");
    const input = select(page, "uwc-input");

    expect(getFormValues(form)).to.deep.eq({ foo: "foo" });
    expect(getVisibleText(input)).to.eq("foo");
    expect(input.value).to.eq("foo");
    expect(input.selected).to.deep.eq([]);

    input.clear();

    expect(getFormValues(form)).to.deep.eq({ foo: "" });
    expect(getVisibleText(input)).to.eq("");
    expect(input.value).to.eq("");
    expect(input.selected).to.deep.eq([]);
  });

  it("should clear all values but preserve the template", async () => {
    const page = render(
      <uwc-input multiple>
        <ul part="values">
          <template>
            <li>
              <slot />
            </li>
          </template>
          <li>first</li>
          <li>second</li>
        </ul>
        <dialog>
          <ul>
            <li>first</li>
            <li>second</li>
          </ul>
        </dialog>
      </uwc-input>,
    );
    expect(select(page, "uwc-input").selected).to.deep.eq(["first", "second"]);
    select(page, "uwc-input").clear();
    expect(select(page, "uwc-input").selected).to.deep.eq([]);
    expect(() => select(page, "template")).not.to.throw();
  });

  it("should add aria-selected to pre-selected suggestions", () => {
    const page = render(
      <uwc-input>
        <ul part="values">
          <li>A</li>
        </ul>
        <dialog popover>
          <ul>
            <li>A</li>
          </ul>
        </dialog>
      </uwc-input>,
    );
    const suggestion = select(page, "dialog li");

    expect(suggestion.getAttribute("aria-selected")).to.eq("true");
  });

  it("should add aria-selected to the suggestion whose value equals the given value", () => {
    const page = render(
      <uwc-input value="A">
        <dialog popover>
          <ul>
            <li>A</li>
          </ul>
        </dialog>
      </uwc-input>,
    );
    const suggestion = select(page, "dialog li");

    expect(suggestion.getAttribute("aria-selected")).to.eq("true");
  });

  it("should remove aria-selected from de-selected suggestions", async () => {
    const page = render(
      <uwc-input multiple>
        <ul part="values">
          <li>A</li>
        </ul>
        <dialog popover>
          <ul>
            <li>A</li>
          </ul>
        </dialog>
      </uwc-input>,
    );
    const input = select(page, "uwc-input");
    const suggestion = select(page, "dialog li");
    await user.click(input);
    await user.click(suggestion);

    expect(suggestion.getAttribute("aria-selected")).to.eq("false");
  });

  it.todo("should set aria-current on the closest match", async () => {
    const page = render(
      <uwc-input>
        <dialog popover>
          <ul>
            <li>A</li>
          </ul>
        </dialog>
      </uwc-input>,
    );
    const input = select(page, "uwc-input");
    const suggestion = select(page, "dialog li");
    await user.type(input, "A");

    expect(suggestion.getAttribute("aria-current")).to.eq("true");

    await user.type(input, "{Backspace}");

    expect(suggestion.getAttribute("aria-selected")).to.eq("false");
  });

  it("clicking next to it should not focus it", async () => {
    const page = render(
      <div style={{ display: "flex", flexDirection: "row" }}>
        <uwc-input></uwc-input>
        <span>Click me</span>
      </div>,
    );
    await user.click(select(page, "span"));
    expect(select(page, "uwc-input")).not.to.match(":focus-within");
  });

  it("should focus when wrapped label is clicked", async () => {
    const page = render(
      <label>
        Foobar<uwc-input></uwc-input>
      </label>,
    );
    await user.click(select(page, "label"));
    expect(select(page, "uwc-input")).to.match(":focus-within");
  });

  it("placeholder should not be visible when selected values exist", () => {
    const page = render(
      <uwc-input placeholder="Foo">
        <ul part="values">
          <li>A</li>
        </ul>
      </uwc-input>,
    );
    expect(select(page, "[part=placeholder]")).to.not.be.visible;
  });

  it("should be possible to remove selected values with {Backspace}", async () => {
    const page = render(
      <uwc-input>
        <ul part="values">
          <li>foo</li>
        </ul>
      </uwc-input>,
    );
    const input = select(page, "uwc-input");
    expect(input.selected).to.deep.eq(["foo"], "asserting test setup");

    await user.type(input, "{Backspace}");

    expect(input.selected).to.deep.eq([]);
  });

  it.todo("should be possible to add values with {Enter} if [multiple]");

  it("should not be possible to edit a readonly root element", async () => {
    const page = render(
      <uwc-input>
        <div part="root" aria-readonly="true"></div>
      </uwc-input>,
    );
    const input = select(page, "uwc-input");
    await user.type(input, "foo");

    expect(input.value).to.eq("");
  });

  it("should reset itself when the closest form is reset", async () => {
    const page = render(
      <form>
        <uwc-input name="foo" value="foo"></uwc-input>
        <button type="reset">Reset</button>
      </form>,
    );
    expect(getFormValues(page)).to.deep.eq({
      foo: "foo",
    });

    await user.type(select(page, "uwc-input [contenteditable]"), "bar");

    expect(getFormValues(page)).to.deep.eq({
      foo: "foobar",
    });

    await user.click(select(page, "button[type=reset]"));

    expect(getFormValues(page)).to.deep.eq({
      foo: "foo",
    });
  });

  it("should not reset itself if it has no name as it's not participating in the form", async () => {
    const page = render(
      <form>
        <uwc-input></uwc-input>
        <button type="reset">Reset</button>
      </form>,
    );
    await user.click(select(page, "uwc-input"));
    await user.keyboard("foobar");

    expect(getInput(page)).to.include({
      value: "foobar",
    });

    await user.click(select(page, "button[type=reset]"));
    expect(getInput(page)).to.include({ value: "foobar" });
  });

  it("should be possible to omit the root elements value with [hidden]", () => {
    const page = render(
      <form>
        <uwc-input name="foo">
          <div part="root" hidden></div>
        </uwc-input>
      </form>,
    );

    expect(getFormValues(select(page, "form"))).to.deep.eq({});
  });

  it("should not be possible to type when [disabled]", async () => {
    const page = render(<uwc-input disabled></uwc-input>);
    const input = select(page, "uwc-input");
    const content = select(input, "[contenteditable]");

    await expect(user.type(content, "foo")).to.eventually.be.rejected;
  });

  it("should be possible to hide only the textcontent by specifying [hidden] on [part=root]", () => {
    const page = render(
      <uwc-input>
        <div part="root" hidden></div>
      </uwc-input>,
    );

    expect(
      select(page, "[part=placeholder]").checkVisibility({
        opacityProperty: true,
      }),
    ).to.be.true;
    expect(
      select(page, "[contenteditable]").checkVisibility({
        opacityProperty: true,
      }),
    ).to.be.false;
  });

  it("should be possible to jump to a suggestions when [part=root][hidden] by typing", async () => {
    const page = render(
      <uwc-input>
        <div part="root" hidden></div>
        <dialog popover>
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>
        </dialog>
      </uwc-input>,
    );

    const input = select(page, "uwc-input");
    await user.type(input, "B");

    expect(select(input, "li:nth-child(2)")).to.have.attribute(
      "aria-current",
      "true",
    );
  });

  it("should clear the typed value after some time when [part=root][hidden]", async () => {
    const page = render(
      <uwc-input>
        <div part="root" hidden="hidden"></div>
      </uwc-input>,
    );

    await user.type(select(page, "uwc-input"), "foo");
    expect(select(page, "[contenteditable]")).to.have.text("foo");

    await waitFor(() => {
      expect(select(page, "[contenteditable]")).to.have.text("");
    });
  });

  it("should not clear selected values when typing in [part=root][hidden]", async () => {
    const page = render(
      <uwc-input>
        <div part="root" hidden="hidden"></div>
        <dialog popover>
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>
        </dialog>
      </uwc-input>,
    );

    await user.click(select(page, "uwc-input"));
    await user.click(select(page, "li"));

    expect(select(page, "uwc-input").selected).to.deep.eq(["A"]);

    await user.type(select(page, "uwc-input"), "abc");

    expect(select(page, "uwc-input").selected).to.deep.eq(["A"]);
  });

  it("should be possible to select suggestions with arrow keys", async () => {
    const page = render(
      <uwc-input>
        <dialog popover>
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>
        </dialog>
      </uwc-input>,
    );

    await user.click(getInput(page));

    await user.keyboard("{ArrowDown}");
    await user.keyboard("{ArrowDown}");
    expect(getSuggestion(page, 2)).to.have.attribute("aria-current", "true");

    await user.keyboard("{ArrowUp}");
    expect(getSuggestion(page, 1)).to.have.attribute("aria-current", "true");

    await user.keyboard("{ArrowUp}");
    expect(getCurrentSuggestion(page)).to.be.null;

    await user.keyboard("{ArrowUp}");
    expect(getSuggestion(page, 3)).to.have.attribute("aria-current", "true");
  });

  it("should be possible to confirm a selected suggestion with {Enter}", async () => {
    const page = render(
      <uwc-input>
        <dialog popover>
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>
        </dialog>
      </uwc-input>,
    );

    await user.click(getInput(page));
    await user.keyboard("{ArrowDown}");
    await user.keyboard("{Enter}");

    expect(getInput(page).selected).to.deep.eq(["A"]);

    expect(getCurrentSuggestion(page)).to.be.null;
  });

  it.todo(
    "should be possible to go to first element with {Home} and last with {End}",
  );

  it("should not submit form through {Enter} when currently selecting a suggestion", async () => {
    const page = render(
      <form>
        <uwc-input>
          <dialog popover>
            <ul>
              <li>A</li>
              <li>B</li>
              <li>C</li>
            </ul>
          </dialog>
        </uwc-input>{" "}
      </form>,
    );

    await user.click(getInput(page));
    await user.keyboard("{ArrowDown}");

    const waitForSubmit = waitForEvent(select(page, "form"), "submit", {
      timeout: 10,
    });
    await user.keyboard("{Enter}");

    await expect(waitForSubmit).to.eventually.be.rejected;
  });

  it("should add value elements in the dialog that have [aria-selected=true] when upgrading", () => {
    const page = render(
      <uwc-input multiple>
        <dialog popover>
          <ul>
            <li aria-selected="true">Foo</li>
            <li aria-selected="true">Bar</li>
            <li>Bar</li>
          </ul>
        </dialog>
      </uwc-input>,
    );

    expect(getInput(page).selected).to.deep.eq(["Foo", "Bar"]);
  });

  it("should add only the first value element with [aria-select=true] if not [multiple]", () => {
    const page = render(
      <uwc-input>
        <dialog popover>
          <ul>
            <li aria-selected="true">Foo</li>
            <li aria-selected="true">Bar</li>
            <li>Bar</li>
          </ul>
        </dialog>
      </uwc-input>,
    );

    expect(getInput(page).selected).to.deep.eq(["Foo"]);
  });

  it("should not add the text areas value to the form if <div[part=root]> has [hidden]", () => {
    const { form } = setup({
      input: { children: <div part="root" hidden></div> },
    });

    expect(getFormValues(form)).to.deep.eq({});
  });

  it("should not add the .value to the form if [omitValue=form] is set", () => {
    const { form } = setup({
      input: {
        omitvalue: "form",
        value: "foo",
      },
    });

    expect(getFormValues(form)).to.deep.eq({});
  });

  it("should not add the .value to the form if [omitValue] is set", () => {
    const { form } = setup({
      input: {
        omitvalue: true,
        value: "foo",
      },
    });

    expect(getFormValues(form)).to.deep.eq({});
  });

  it("should add the .value to the form if [omitValue] changes accordingly", () => {
    const { form, input } = setup({
      input: {
        omitvalue: "form",
        value: "foo",
      },
    });

    input.omitvalue = undefined;

    expect(getFormValues(form)).to.deep.eq({ input: "foo" });
  });

  describe("custom input area", () => {
    it("should be possible to provide a root element in the first place", async () => {
      const page = render(
        <uwc-input>
          <div part="root" />
        </uwc-input>,
      );
      expect(selectAll(page, "div[part=root]").length).to.eq(1);
    });

    it("should be possible to place stuff before and after the root element", async () => {
      const page = render(
        <uwc-input>
          <div class="icon user" />
          <div part="root" />
          <div class="icon search" />
        </uwc-input>,
      );
      expect(
        pipe(select(page, "[part=root]").previousElementSibling, (sibling) => ({
          className: sibling?.className,
          tagName: sibling?.tagName,
        })),
      ).to.deep.eq({
        className: "icon user",
        tagName: "DIV",
      });

      expect(
        pipe(select(page, "[part=root]").nextElementSibling, (sibling) => ({
          className: sibling?.className,
          tagName: sibling?.tagName,
        })),
      ).to.deep.eq({
        className: "icon search",
        tagName: "DIV",
      });
    });
  });

  describe("events", () => {
    it("should emit an input event on type", async () => {
      const input = render(<uwc-input />);
      const waitForThreeInputEvents = waitForEvent(input, "input", {
        count: 3,
      });
      await user.click(input);
      await user.keyboard("foo");
      expect(waitForThreeInputEvents).to.be.fulfilled;
    });

    it("should be the target of an input event", async () => {
      const page = render(<uwc-input />);
      const input = select(page, "uwc-input");
      const waitForTagnameOfTarget = waitForEvent(input, "input", {
        mapEvent: (event) => (event.target as HTMLElement).tagName,
      });
      await user.type(input, "f");
      await expect(waitForTagnameOfTarget).to.eventually.eq("UWC-INPUT");
    });

    it("should emit a change event on blur", async () => {
      const page = render(<uwc-input></uwc-input>);
      const input = select(page, "uwc-input");
      const waitForChange = waitForEvent(input, "change");
      await user.type(input, "foo");
      await user.tab();
      await expect(waitForChange).to.be.fulfilled;
    });

    it("should not emit a change event if value has not changed", async () => {
      const page = render(<uwc-input></uwc-input>);
      const input = select(page, "uwc-input");
      const events = trapEvents(input, ["change"]);
      await user.click(input);
      await user.tab();
      expect(events.get()).to.deep.eq([]);
    });

    // dubious behaviour - why? Removal can occur programmatically or through user interaction; only the latter should emit a change event but uwc cannot possibly know this -> defer to user implementation.
    it.skip("should emit an input event if the list changes", async () => {
      const page = render(
        <uwc-input>
          <ul part="values">
            <li onclick="this.remove()">A</li>
          </ul>
        </uwc-input>,
      );
      const input = select(page, "uwc-input");
      const events = trapEvents(input, ["input"]);

      await user.click(select(page, "li"));

      expect(events.get()).to.have.length(1);
    });

    // dubious behaviour - why? Removal can occur programmatically or through user interaction; only the latter should emit a change event but uwc cannot possibly know this -> defer to user implementation.
    it.skip("should emit a change event if not focussed and the values list changes", async () => {
      const page = render(
        <uwc-input>
          <ul part="values">
            <li onmousedown="event.preventDefault()" onclick="this.remove()">
              A
            </li>
          </ul>
        </uwc-input>,
      );
      const input = select(page, "uwc-input");
      const events = trapEvents(input, ["change"]);

      await user.click(select(page, "li"));

      expect(events.get()).to.have.length(1);
    });

    it("should not emit a change event if focussed and the values list changes", () => {
      const page = render(
        <uwc-input>
          <ul part="values">
            <li onclick="this.remove()">A</li>
          </ul>
        </uwc-input>,
      );
      const input = select(page, "uwc-input");
      const events = trapEvents(input, ["change"]);

      select(page, "li").click();

      expect(events.get()).to.have.length(0);
    });

    it("should emit a change event on selection", async () => {
      const page = render(
        <uwc-input>
          <dialog popover>
            <ul>
              <li>A</li>
              <li>B</li>
              <li>C</li>
            </ul>
          </dialog>
        </uwc-input>,
      );
      const input = select(page, "uwc-input");
      const firstOption = select(input, "li");
      const changeEvents = trapEvents(input, ["change"]);

      await user.click(input);
      await user.click(firstOption);

      expect(changeEvents.get()).to.have.length(1);
    });

    it("should remove the typed value on selection", async () => {
      const page = render(
        <uwc-input>
          <dialog popover>
            <ul>
              <li>A</li>
              <li>B</li>
              <li>C</li>
            </ul>
          </dialog>
        </uwc-input>,
      );
      const input = select(page, "uwc-input");

      await user.type(input, "foo");

      await user.click(input);
      await user.click(select(input, "li"));

      expect(getVisibleText(input)).to.eq("A");
    });

    it("should not emit another change event on blur after selecting a suggestion", async () => {
      // TODO: should work sync
      const page = await renderAsync(
        <uwc-input>
          <dialog popover>
            <ul>
              <li>A</li>
              <li>B</li>
              <li>C</li>
            </ul>
          </dialog>
        </uwc-input>,
      );
      const input = select(page, "uwc-input");
      const firstOption = select(input, "li");
      const waitForChange = waitForEvent(input, "change", {
        count: 2,
        timeout: 50,
      });
      await user.click(input);
      await user.click(firstOption);
      await expect(waitForChange).to.eventually.be.rejected;
    });
  });

  it("should trigger validate if pattern changes", async () => {
    const page = render(
      <uwc-input type="text" pattern="^\d+$" value="123"></uwc-input>,
    );

    const input = select(page, "uwc-input");
    expect(input.validity.patternMismatch).to.eq(false);
    input.pattern = "^[a-zA-Z]+$";
    expect(input.validity.patternMismatch).to.eq(true);
  });

  describe("validation", () => {
    each<
      Partial<JSX.Attributes<UwcInputElement>> & {
        type?: never;
        message: string;
        expectedValidity?: ValidityStateFlags;
        expectedErrormessages?: string[];
      }
    >(
      [
        {
          message: "should be invalid if required and empty",
          required: true,
          value: "",
          expectedValidity: { valueMissing: true },
        },
        {
          message: "should be valid if required and not empty",
          required: true,
          value: "foo",
          expectedValidity: { valueMissing: false },
        },
        {
          message: "should be possible to customize the required error message",
          required: true,
          value: "",
          "value-missing": "Hey, I need this",
          expectedValidity: { valueMissing: true },
          expectedErrormessages: ["Hey, I need this"],
        },
        {
          message:
            "should be valid if required and empty, but the severity isn't error",
          required: true,
          value: "",
          "value-missing-severity": "warning",
          expectedValidity: { valueMissing: false },
        },
        {
          message: "should be invalid if the value is too short",
          minlength: 2,
          value: "f",
          expectedValidity: { tooShort: true },
        },
        {
          message: "should be valid if the value is long enough",
          minlength: 2,
          value: "foo",
          expectedValidity: { tooShort: false },
        },
        {
          message:
            "should be possible to customize the too-short error message",
          minlength: 2,
          value: "f",
          "too-short": "Must be 2 or more",
          expectedValidity: { tooShort: true },
          expectedErrormessages: ["Must be 2 or more"],
        },
        {
          message: "should be valid if too short, but the severity isn't error",
          minlength: 2,
          value: "f",
          "too-short-severity": "warning",
          expectedValidity: { tooShort: false },
        },
        {
          message: "should be invalid if the value is too long",
          maxlength: 2,
          value: "foo",
          expectedValidity: { tooLong: true },
        },
        {
          message: "should be valid if the value is short enough",
          maxlength: 2,
          value: "f",
          expectedValidity: { tooLong: false },
        },
        {
          message: "should be possible to customize the too-long error message",
          maxlength: 2,
          value: "foo",
          "too-long": "Must be 2 or less",
          expectedValidity: { tooLong: true },
          expectedErrormessages: ["Must be 2 or less"],
        },
        {
          message: "should be valid if too long, but the severity isn't error",
          maxlength: 2,
          value: "foo",
          "too-long-severity": "warning",
          expectedValidity: { tooLong: false },
        },
        {
          message: "should be invalid if pattern does not match",
          value: "foo",
          pattern: "bar",
          expectedValidity: { patternMismatch: true },
        },
        {
          message:
            "should be possible to customize the pattern-mismatch error message",
          value: "foo",
          pattern: "bar",
          "pattern-mismatch": "must conform to pattern",
          expectedValidity: { patternMismatch: true },
          expectedErrormessages: ["must conform to pattern"],
        },
        {
          message:
            "should be valid if pattern does not match but the severity isn't error",
          value: "foo",
          pattern: "bar",
          "pattern-mismatch-severity": "warning",
          expectedValidity: { patternMismatch: false },
        },
        {
          message:
            "should be invalid if selected values do not match the pattern",
          pattern: "\\d",
          children: (
            <ul part="values">
              <li>foo</li>
            </ul>
          ),
          expectedValidity: { patternMismatch: true },
        },
      ],
      "$message",
      async ({
        message: _,
        expectedValidity,
        expectedErrormessages,
        ...props
      }) => {
        const page = render(<uwc-input {...props} />);
        const input = select(page, "uwc-input");
        if (expectedValidity != null) {
          expect(input.validity).to.include(expectedValidity);
        }
        expectedErrormessages?.forEach((message) =>
          expect(
            Array.from(input.querySelectorAll("small.validation-message")).some(
              (element) => element.textContent === message,
            ),
          ).to.eq(
            true,
            `expected to find a small.validation-message with '${message}'`,
          ),
        );
      },
    );
    it("should have validity.valueMissing if [required] and empty", () => {
      const page = render(<uwc-input type="text" required></uwc-input>);

      const input = select(page, "uwc-input");
      expect(input.validity.valueMissing).to.eq(true);
      input.value = "foo";
      expect(input.validity.valueMissing).to.eq(false);
    });

    it("should have validity.tooShort if value is too short for [minlength]", () => {
      const page = render(
        <uwc-input type="text" minlength={3} value="fo"></uwc-input>,
      );

      const input = select(page, "uwc-input");
      expect(input.validity.tooShort).to.eq(true);
      input.value = "foo";
      expect(input.validity.tooShort).to.eq(false);
    });

    it("should have validity.tooLong if value is too long for [maxlength]", () => {
      const page = render(
        <uwc-input type="text" maxlength={3} value="fooo"></uwc-input>,
      );

      const input = select(page, "uwc-input");
      expect(input.validity.tooLong).to.eq(true);
      input.value = "foo";
      expect(input.validity.tooLong).to.eq(false);
    });

    it("should have validity.rangeUnderflow if [multiple] and less values than [min] exist", async () => {
      const page = render(
        <uwc-input type="text" multiple min={3}>
          <ul part="values">
            <li>A</li>
          </ul>
          <dialog popover>
            <ul>
              <li>B</li>
            </ul>
          </dialog>
        </uwc-input>,
      );

      const input = select(page, "uwc-input");
      expect(input.validity.rangeUnderflow).to.eq(true); // ["A", ""]
      await user.click(input);
      await user.click(select(input, "dialog li")); // ["A", "B", ""]
      expect(input.validity.rangeUnderflow).to.eq(false);
    });

    it("should have validity.rangeOverflow if [multiple] and more values than [max] exist", async () => {
      const page = render(
        <uwc-input type="text" multiple max={2}>
          <ul part="values">
            <li>A</li>
          </ul>
          <dialog popover>
            <ul>
              <li>B</li>
            </ul>
          </dialog>
        </uwc-input>,
      );

      const input = select(page, "uwc-input");
      expect(input.validity.rangeOverflow).to.eq(false); // ["A", ""]
      await user.click(input);
      await user.click(select(input, "dialog li")); // ["A", "B", ""]
      expect(input.validity.rangeOverflow).to.eq(true);
    });

    it("should add validation messages as child", () => {
      const page = render(<uwc-input required></uwc-input>);

      expect(page.querySelector("small.validation-message")).to.exist;
    });
  });

  describe("a11y", () => {
    it("should have [role=textbox]", () => {
      const page = render(<uwc-input></uwc-input>);

      const input = queryByRole(page, "textbox");

      expect(input).to.not.be.null;
    });

    it("should have [role=combobox] if a <dialog popover> is available", () => {
      const { page } = setup({
        input: {
          children: (
            <dialog popover>
              <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
              </ul>
            </dialog>
          ),
        },
      });

      const input = queryByRole(page, "combobox");

      expect(input).to.not.be.null;
    });

    it("should have [aria-haspopup=true] if a <dialog popover> is available", () => {
      const { page } = setup({
        input: {
          children: (
            <dialog popover>
              <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
              </ul>
            </dialog>
          ),
        },
      });

      expect(page.querySelector("uwc-input[aria-haspopup=true]")).to.not.be
        .null;
    });

    it("should not overwrite [aria-haspopup] if it is already set", () => {
      const { input } = setup({
        input: {
          ariaHaspopup: "listbox",
          children: (
            <dialog popover>
              <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
              </ul>
            </dialog>
          ),
        },
      });

      expect(input.ariaHasPopup).to.eq("listbox");
    });
  });
});