import { classNames } from "@hesxenon/prelude/Dom.js";
import {
  describe,
  expect,
  it,
  render,
  select,
  selectAll,
  waitFor,
} from "../utils/Test";

describe("uwc-toc", () => {
  const setup = Object.assign(
    ({
      headings = setup.defaultHeadings,
      props = {},
      containerProps = {},
    }: {
      headings?: JSX.Node;
      props?: Partial<JSX.Attributes<UwcTocElement>>;
      containerProps?: Partial<JSX.Attributes<HTMLDivElement>>;
    } = {}) => {
      const page = render(
        <div
          {...containerProps}
          class={classNames("container", containerProps.class)}
        >
          <uwc-toc {...props}></uwc-toc>
          {headings}
        </div>,
      );

      return {
        toc: select(page, "uwc-toc"),
        container: select(page, "div.container"),
      };
    },
    {
      defaultHeadings: (
        <>
          <section>
            <h2>Foo</h2>
          </section>
          <section>
            <h2>Bar</h2>
          </section>
          <section>
            <h2>Baz</h2>
          </section>
        </>
      ),
      container: {
        tiny: {
          style: {
            height: "50px",
            overflow: "auto",
          },
        },
      } satisfies Record<string, JSX.Attributes<HTMLDivElement>>,
    },
  );

  it("should create a list of all headings", () => {
    const { toc } = setup();

    expect(selectAll(toc, "a").map((link) => link.innerText)).to.deep.eq([
      "Foo",
      "Bar",
      "Baz",
    ]);
  });

  it("should always scroll a heading into view, even if the url doesn't change", () => {
    const { toc, container } = setup({ containerProps: setup.container.tiny });

    expect(container.scrollTop).to.eq(0);

    select(toc, "a").click();

    expect(container.scrollTop).to.be.greaterThan(0);
  });

  it("should be possible to specify which heading tags to consider", () => {
    const { toc } = setup({
      headings: (
        <>
          <section>
            <h2>Foo</h2>
          </section>
          <section>
            <h3>Bar</h3>
          </section>
          <section>
            <h4>Baz</h4>
          </section>
        </>
      ),
      props: {
        headingselector: "h2,h3",
      },
    });

    expect(selectAll(toc, "a").map((link) => link.innerText)).to.deep.eq([
      "Foo",
      "Bar",
      // "Baz", // not included because h4 isn't part of the selectors
    ]);
  });

  it("should use existing title attributes over textContent", () => {
    const { toc } = setup({
      headings: (
        <>
          <section>
            <h2 title="foo">Foo</h2>
          </section>
          <section>
            <h2 title="bar">Bar</h2>
          </section>
          <section>
            <h2 title="baz">Baz</h2>
          </section>
        </>
      ),
    });

    expect(selectAll(toc, "a").map((link) => link.innerText)).to.deep.eq([
      "foo",
      "bar",
      "baz",
    ]);
  });

  it.todo("should react to changes in heading elements");

  it("should set [aria-current] on the entries according to the scroll position", async () => {
    const { toc, container } = setup({
      containerProps: setup.container.tiny,
    });

    await waitFor(() =>
      expect(select(toc, "li")).to.include({ ariaCurrent: "false" }),
    );
    container.scrollTop = 90;

    await waitFor(() =>
      expect(select(toc, "li")).to.include({ ariaCurrent: "true" }),
    );
  });

  describe("links to headings", () => {
    it.todo("should be possible to turn off link creation with [nolinks]");
    it.todo("should update the url based on the current scroll position");
    it.todo("should only consider headings with ids");
  });
});