import "../../index.css";

import { parsePatchFiles } from "@pierre/diffs/utils/parsePatchFiles";
import { scopeThreadRef } from "@t3tools/client-runtime";
import { EnvironmentId, ThreadId } from "@t3tools/contracts";
import { afterEach, describe, expect, it, vi } from "vite-plus/test";
import { page } from "vite-plus/test/browser";
import { render } from "vitest-browser-react";

import { useComposerDraftStore } from "~/composerDraftStore";

import { AnnotatableFileDiff } from "./AnnotatableFileDiff";

function dispatchPointer(target: EventTarget, type: string, pointerId: number): void {
  target.dispatchEvent(
    new PointerEvent(type, {
      bubbles: true,
      cancelable: true,
      composed: true,
      pointerId,
      pointerType: "mouse",
    }),
  );
}

const threadRef = scopeThreadRef(EnvironmentId.make("local"), ThreadId.make("thread-1"));

function TestDiff() {
  const fileDiff = parsePatchFiles(
    [
      "diff --git a/src/app.ts b/src/app.ts",
      "--- a/src/app.ts",
      "+++ b/src/app.ts",
      "@@ -1,3 +1,3 @@",
      " one",
      "-two",
      "+TWO",
      " three",
    ].join("\n"),
    "annotatable-file-diff-test",
  )[0]!.files[0]!;

  return (
    <AnnotatableFileDiff
      fileDiff={fileDiff}
      filePath="src/app.ts"
      sectionId="turn:2"
      sectionTitle="Turn 2"
      composerDraftTarget={threadRef}
      renderHeaderPrefix={() => null}
      options={{
        diffStyle: "unified",
        lineDiffType: "none",
        themeType: "light",
      }}
    />
  );
}

async function getRenderedDiff() {
  return vi.waitFor(() => {
    const element = document.querySelector<HTMLElement>("diffs-container");
    expect(element?.shadowRoot).not.toBeNull();
    return element!;
  });
}

describe("annotatable Pierre file diff", () => {
  afterEach(() => {
    document.body.innerHTML = "";
    useComposerDraftStore.getState().setReviewComments(threadRef, []);
  });

  it("creates a local annotation from the gutter and attaches it to the composer", async () => {
    let screen = await render(<TestDiff />);

    try {
      const diff = await getRenderedDiff();
      const addedLineNumber = await vi.waitFor(() => {
        const elements = Array.from(
          diff.shadowRoot?.querySelectorAll<HTMLElement>('[data-column-number="2"]') ?? [],
        );
        const element = elements.at(-1) ?? null;
        expect(element).not.toBeNull();
        return element!;
      });

      dispatchPointer(addedLineNumber, "pointerdown", 1);
      dispatchPointer(addedLineNumber, "pointerup", 1);

      const textarea = page.getByRole("textbox", { name: "Comment on lines +2" });
      await expect.element(textarea).toBeVisible();
      await textarea.fill("Use the compatible value.");
      await page.getByRole("button", { name: "Comment" }).click();

      await vi.waitFor(() => {
        expect(
          useComposerDraftStore.getState().getComposerDraft(threadRef)?.reviewComments,
        ).toEqual([
          expect.objectContaining({
            sectionId: "turn:2",
            filePath: "src/app.ts",
            rangeLabel: "+2",
            text: "Use the compatible value.",
            diff: "@@ -0,0 +2,1 @@\n+TWO",
          }),
        ]);
      });
      expect(document.querySelector("[data-file-comment-annotation]")?.textContent).toContain(
        "Use the compatible value.",
      );

      await screen.unmount();
      screen = await render(<TestDiff />);
      await expect
        .element(page.getByText("Use the compatible value.", { exact: true }))
        .toBeVisible();
    } finally {
      await screen.unmount();
    }
  });
});