import {
  describe,
  expect,
  it,
  render,
  select,
  selectAll,
  sleep,
  waitFor,
} from "../utils/Test";

describe("uwc-table2", () => {
  const setup = (element: JSX.Element) => {
    const page = render(element);
    const table = select(page, "uwc-table");

    return { table };
  };

  it("should not require table headers", async () => {
    const { table } = setup(
      <uwc-table>
        <uwc-tr>
          <uwc-td>A</uwc-td>
          <uwc-td>B</uwc-td>
          <uwc-td>C</uwc-td>
        </uwc-tr>
      </uwc-table>,
    );

    await waitFor(() => {
      expect(table.style.gridTemplateColumns.split(" ")).to.have.length(3);
    });
  });

  it.todo("should react to colspan changes while visible");

  describe("JS API", () => {
    it("should be possible to move column ranges via JS API", async () => {
      const { table } = setup(
        <uwc-table>
          <uwc-tr>
            <uwc-td>A</uwc-td>
            <uwc-td>B</uwc-td>
            <uwc-td>C</uwc-td>
          </uwc-tr>
        </uwc-table>,
      );

      table.move([3, 4], 1);

      await waitFor(() => {
        expect(
          selectAll(table, "uwc-td")
            .sort((a, b) => a.start - b.start)
            .map((cell) => cell.textContent),
        ).to.deep.eq(["C", "A", "B"]);
      });
    });

    it("should be possible to hide columns via JS API", async () => {
      const { table } = setup(
        <uwc-table>
          <uwc-tr>
            <uwc-td>A</uwc-td>
            <uwc-td>B</uwc-td>
            <uwc-td>C</uwc-td>
          </uwc-tr>
        </uwc-table>,
      );

      table.setHidden([1, 2], true);

      await waitFor(() => {
        expect(table.style.gridTemplateColumns.split(" ")[0]).to.eq("0px");
      });
    });

    it("should be possible to set the size of breakpoints via JS API", async () => {
      const { table } = setup(
        <uwc-table>
          <uwc-tr>
            <uwc-td>A</uwc-td>
            <uwc-td>B</uwc-td>
            <uwc-td>C</uwc-td>
          </uwc-tr>
        </uwc-table>,
      );

      table.setWidth([1, 2], 300);

      await waitFor(() => {
        expect(table.style.gridTemplateColumns.split(" ")[0]).to.eq("300px");
      });
    });

    it("should be possible to prevent a move", async () => {
      const { table } = setup(
        <uwc-table>
          <uwc-tr>
            <uwc-td>A</uwc-td>
            <uwc-td>B</uwc-td>
            <uwc-td>C</uwc-td>
          </uwc-tr>
        </uwc-table>,
      );
      table.addEventListener("beforemove", (e) => e.preventDefault());

      await sleep(100);

      table.move([2, 3], 4);

      expect(
        selectAll(table, "uwc-td")
          .sort((a, b) => a.start - b.start)
          .map((cell) => cell.textContent),
      ).to.deep.eq(["A", "B", "C"]);
    });
  });

  describe("masonry layouts", () => {
    it("moving breakpoints within a cells range should not move that cell", async () => {
      const { table } = setup(
        <uwc-table>
          <uwc-tr>
            <uwc-td>A</uwc-td>
            <uwc-td colspan={3}>B</uwc-td>
          </uwc-tr>
        </uwc-table>,
      );

      table.move([3, 4], 5);

      await waitFor(() => {
        const td = select(table, "uwc-td:nth-child(2)");

        expect(td).to.include({ start: 2 });
      });
    });

    it("moving a cell so that its breakpoint conflicts with another cells range should shift the conflicting start point behind the larger cell", async () => {
      const { table } = setup(
        <uwc-table>
          <uwc-tr>
            <uwc-td>A</uwc-td>
            <uwc-td>B</uwc-td>
            <uwc-td>C</uwc-td>
            <uwc-td>D</uwc-td>
            <uwc-td>E</uwc-td>
          </uwc-tr>
          <uwc-tr>
            <uwc-td>a</uwc-td>
            <uwc-td colspan={3}>b</uwc-td>
            <uwc-td>c</uwc-td>
          </uwc-tr>
        </uwc-table>,
      );

      table.move([2, 3], 5);

      await waitFor(() => {
        const c = select(table, "uwc-tr:last-of-type uwc-td:last-of-type");
        expect(c.start).to.eq(5);
      });
    });
  });

  describe("<uwc-thead>", () => {
    it.todo(
      "should set the width based on the [width] attribute of <uwc-th> elements",
    );
    it.todo(
      "should ignore widths on <uwc-th> elements that are not in a <uwc-thead> element",
    );

    it.todo(
      "should hide columns based on the [hidden] attribute of <uwc-th> elements",
    );
    it.todo(
      "should ignore hidden on <uwc-th> elements that are not in a <uwc-thead> element",
    );
  });

  describe("row pinning", () => {
    it("should be possible to pin a row to the top", () => {
      const { table } = setup(
        <uwc-table>
          <uwc-tr pinned="top">
            <uwc-td></uwc-td>
            <uwc-td></uwc-td>
            <uwc-td></uwc-td>
          </uwc-tr>
          <uwc-tr>
            <uwc-td></uwc-td>
            <uwc-td></uwc-td>
            <uwc-td></uwc-td>
          </uwc-tr>
          <uwc-tr>
            <uwc-td></uwc-td>
            <uwc-td></uwc-td>
            <uwc-td></uwc-td>
          </uwc-tr>
        </uwc-table>,
      );

      expect(select(table, "uwc-tr[pinned=top]").style).to.include({
        position: "sticky",
        top: "0px",
      });
    });
  });
});