import {
  describe,
  drag,
  expect,
  getFormValues,
  it,
  queryAllByRole,
  R,
  render,
  select,
  trapEvents,
  user,
} from "../../utils/Test";

describe("uwc-input[type=range]", () => {
  it("should default to [value]=50", () => {
    const page = render(<uwc-input type="range"></uwc-input>);
    expect(select(page, "uwc-input")).to.include({
      value: 50,
    });
  });

  it("should be possible to set a [value]", () => {
    const page = render(<uwc-input type="range" value="25"></uwc-input>);
    expect(select(page, "uwc-input")).to.include({ value: 25 });
  });

  it("should not be possible to go below [min] or above [max]", () => {
    const page = render(
      <uwc-input type="range" min="25" max="75" value="25"></uwc-input>,
    );
    const input = select(page, "uwc-input");
    input.value = 0;
    expect(input).to.include({ value: 25 });

    input.value = 100;
    expect(input).to.include({ value: 75 });
  });

  it("should round the [value] to the nearest [step]", () => {
    const page = render(
      <uwc-input type="range" step="5" value="53"></uwc-input>,
    );
    expect(select(page, "uwc-input")).to.include({ value: 55 });
  });

  // maybe utilize puppeteer for this?
  it.skip("should emit a change event when dragging", async () => {
    const page = render(<uwc-input type="range"></uwc-input>);
    const input = select(page, "uwc-input");
    const changeEvents = trapEvents(input, ["change"]);

    await drag(select(input, "[part='thumb-start']"), {
      delta: { x: 20, y: 0 },
    });

    expect(changeEvents.get()).to.not.be.empty;
  });

  it("should not emit a change event when setting the value programmatically", () => {
    const page = render(<uwc-input type="range"></uwc-input>);
    const input = select(page, "uwc-input");
    const changeEvents = trapEvents(input, ["change"]);

    input.value = 75;

    expect(changeEvents.get()).to.be.empty;
  });

  it("should change when clicking on the track", async () => {
    const page = render(<uwc-input type="range"></uwc-input>);
    const track = select(page, "div[part=track]");

    await user.click(track);
  });

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

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

    input.clear();

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

  describe("forms", () => {
    it("should set its current value as form data", () => {
      const page = render(
        <form>
          <uwc-input type="range" value="35" name="foo"></uwc-input>
        </form>,
      );
      expect(getFormValues(page)).to.deep.eq({
        foo: "35",
      });
    });

    it("should set its current start and end as form value in the form `${start},${end}`", () => {
      const page = render(
        <form>
          <uwc-input type="range" start="35" end="65" name="foo"></uwc-input>
        </form>,
      );
      expect(getFormValues(page)).to.deep.eq({
        foo: "35,65",
      });
    });

    it("should be possible to reset it", async () => {
      const page = render(
        <form>
          <uwc-input type="range" value="35" name="foo"></uwc-input>
          <button type="reset">Reset</button>
        </form>,
      );
      const input = select(page, "uwc-input");
      input.value = 50;
      await user.click(select(page, "button"));

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

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

      input.value = 50;

      expect(input).to.include({ value: 30 });
    });

    it.todo("should still be possible to focus the slider");
  });

  describe("[disabled]", () => {
    it.todo("should not be possible to change it");

    it.todo("should not be possible to focus the slider");
  });

  describe("[multiple]", () => {
    it.todo("should ignore [value]");

    it.todo("should be possible to set [start] and [end]");

    it.todo("should not be possible to set [end] below [start] or vice versa");

    describe("a11y", () => {
      it.todo("should have two focusable slider controls with [role=slider]");
    });
  });

  describe("a11y", () => {
    it("should have focusable sliders control with [role=slider]", () => {
      const page = render(
        <uwc-input type="range" start="10" end="90"></uwc-input>,
      );

      expect(
        queryAllByRole(page, "slider")?.map(R.pick(["tabIndex", "role"])),
      ).to.have.deep.members([
        {
          tabIndex: 0,
          role: "slider",
        },
        {
          tabIndex: 0,
          role: "slider",
        },
      ]);
    });

    it("should set [aria-valuenow] on the appropriate thumbs", () => {
      const page = render(
        <uwc-input type="range" start="10" end="90"></uwc-input>,
      );
      expect(
        queryAllByRole(page, "slider")?.map(R.pick(["ariaValueNow"])),
      ).to.have.deep.members([{ ariaValueNow: "10" }, { ariaValueNow: "90" }]);
    });

    it("should set [aria-valuemin] and [aria-valuemax]", () => {
      const page = render(<uwc-input type="range"></uwc-input>);
      expect(select(page, "uwc-input")).to.include({
        ariaValueMin: "0",
        ariaValueMax: "100",
      });
    });

    it("should be possible to move the slider with the arrow keys", async () => {
      const page = render(
        <uwc-input type="range" step="5" value="50"></uwc-input>,
      );
      const input = select(page, "uwc-input");
      await user.tab(); // focuses the input itself
      await user.tab(); // focuses the handle
      await user.keyboard("{ArrowLeft}");
      expect(input).to.include({ value: 45 });
      await user.keyboard("{ArrowUp}");
      expect(input).to.include({ value: 40 });
      await user.keyboard("{ArrowRight}");
      expect(input).to.include({ value: 45 });
      await user.keyboard("{ArrowDown}");
      expect(input).to.include({ value: 50 });
    });
  });
});