import {
  render,
  user,
  getFormValues,
  select,
  expect,
  describe,
  it,
  queryByRole,
  waitForEvent,
  each,
} from "../../utils/Test";

const getInput = (within: Element) => select(within, "uwc-input");

describe("uwc-input[type=checkbox]", () => {
  it("should be possible to check and uncheck it", async () => {
    const page = render(<uwc-input type="checkbox"></uwc-input>);
    const checkbox = select(page, "uwc-input");

    await user.click(checkbox);
    expect(checkbox.checked).to.eq(true);

    await user.click(checkbox);
    expect(checkbox.checked).to.eq(false);
  });

  it("should be possible to specify an initial checked state", () => {
    const page = render(<uwc-input type="checkbox" checked></uwc-input>);
    const checkbox = select(page, "uwc-input");

    expect(checkbox.checked).to.eq(true);
  });

  it("should add its checked state to the formdata unless value is specified", () => {
    const page = render(
      <form>
        <uwc-input type="checkbox" checked name="foo"></uwc-input>
      </form>,
    );
    const form = select(page, "form");
    const checkbox = select(page, "uwc-input");

    expect(getFormValues(form)).to.deep.eq({ foo: "true" });
    checkbox.checked = false;
    expect(getFormValues(form)).to.deep.eq({ foo: "false" });
  });

  it("should add its value to the formdata only if checked", () => {
    const page = render(
      <form>
        <uwc-input type="checkbox" checked name="foo" value="bar"></uwc-input>
      </form>,
    );
    const form = select(page, "form");
    const checkbox = select(page, "uwc-input");

    expect(getFormValues(form)).to.deep.eq({ foo: "bar" });
    checkbox.checked = false;
    expect(getFormValues(form)).to.deep.eq({});
  });

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

    const form = select(page, "form");
    const input = getInput(page);
    await user.click(input);

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

    input.clear();

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

  describe("events", () => {
    it("should emit a focusin event when selected", async () => {
      const page = render(<uwc-input type="checkbox"></uwc-input>);
      const input = getInput(page);
      const waitForFocusIn = waitForEvent(input, "focusin");

      await user.click(input);

      await expect(waitForFocusIn).to.eventually.be.fulfilled;
    });

    it("should emit an input event when selected", async () => {
      const page = render(<uwc-input type="checkbox"></uwc-input>);
      const input = getInput(page);
      const waitForFocusIn = waitForEvent(input, "input");

      await user.click(input);

      await expect(waitForFocusIn).to.eventually.be.fulfilled;
    });

    it("should emit a change event when changed", async () => {
      const page = render(<uwc-input type="checkbox"></uwc-input>);
      const input = getInput(page);
      const waitForFocusIn = waitForEvent(input, "change");

      await user.click(input);

      await expect(waitForFocusIn).to.eventually.be.fulfilled;
    });

    it("should not change when click events default is prevented", async () => {
      const page = render(
        <uwc-input
          onclick="event.preventDefault()"
          type="checkbox"
        ></uwc-input>,
      );
      const input = getInput(page);

      await user.click(input);

      expect(input.checked).to.be.false;
    });
  });

  it("should be possible to change when focussed with {Space}", async () => {
    const page = render(<uwc-input type="checkbox"></uwc-input>);
    const input = getInput(page);

    await user.tab();
    await user.keyboard(" ");

    expect(input).to.include({ checked: true });
  });

  describe("[readonly]", () => {
    it("should not be possible to change it", async () => {
      const page = render(<uwc-input type="checkbox" readonly></uwc-input>);
      const input = getInput(page);

      await user.click(input);

      expect(input.checked).to.be.false;
    });

    it("should still add its value to formdata", () => {
      const page = render(
        <form>
          <uwc-input type="checkbox" readonly name="foo"></uwc-input>
        </form>,
      );

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

    it("should not report invalid values", async () => {
      const page = render(
        <uwc-input type="checkbox" readonly required></uwc-input>,
      );

      expect(getInput(page).validity).to.include({ valid: true });
    });
  });

  describe("[disabled]", () => {
    it("should not be possible to change", async () => {
      const page = render(<uwc-input type="checkbox" disabled></uwc-input>);
      const input = getInput(page);

      await user.click(input);
      expect(input.checked).to.be.false;
    });

    it("should not add its value to formdata", () => {
      const page = render(
        <form>
          <uwc-input type="checkbox" disabled name="foo"></uwc-input>
        </form>,
      );

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

  describe("validation", () => {
    each<
      Partial<JSX.Attributes<UwcInputElement>> & {
        type: "checkbox";
        message: string;
        expectedInvalidState?: boolean;
        expectedErrormessages?: string[];
      }
    >(
      [
        {
          message: "should be invalid if required and checkbox isn't checked",
          type: "checkbox",
          required: true,
          checked: false,
          expectedInvalidState: true,
        },
        {
          message: "should be valid if required and checkbox is checked",
          type: "checkbox",
          required: true,
          checked: true,
          expectedInvalidState: false,
        },
      ],
      "$message",
      async ({
        message: _,
        expectedInvalidState,
        expectedErrormessages,
        ...props
      }) => {
        const page = render(<uwc-input {...props} />);
        const input = select(page, "uwc-input");
        if (expectedInvalidState != null) {
          expect(input.matches(":invalid")).to.eq(expectedInvalidState);
        }
        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}'`,
          ),
        );
      },
    );
  });

  describe("a11y", () => {
    it("should have role 'checkbox'", () => {
      const page = render(<uwc-input type="checkbox"></uwc-input>);

      expect(queryByRole(page, "checkbox")).to.exist;
    });

    it("should not overwrite preset roles", () => {
      const page = render(
        <uwc-input type="checkbox" role="switch"></uwc-input>,
      );

      expect(queryByRole(page, "switch")).to.exist;
    });

    it("should have [aria-checked] which reflects its checked state", () => {
      const page = render(<uwc-input type="checkbox"></uwc-input>);
      const input = select(page, "uwc-input");

      expect(input).to.have.attribute("aria-checked", "false");
      input.checked = true;
      expect(input).to.have.attribute("aria-checked", "true");
    });

    it("should have [aria-checked=mixed] when checked and indeterminate", () => {
      const page = render(<uwc-input type="checkbox"></uwc-input>);
      const input = select(page, "uwc-input");

      expect(input).to.have.attribute("aria-checked", "false");
      input.checked = true;
      input.indeterminate = true;
      expect(input).to.have.attribute("aria-checked", "mixed");
    });

    it("should be possible to focus with tab", async () => {
      const page = render(<uwc-input type="checkbox"></uwc-input>);
      const input = getInput(page);

      await user.tab();

      expect(document.activeElement).to.eq(input);
    });
  });
});