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

import type { LineAnnotation, SelectedLineRange } from "@pierre/diffs";
import { Editor } from "@pierre/diffs/editor";
import { EditorProvider, File } from "@pierre/diffs/react";
import { afterEach, describe, expect, it, vi } from "vite-plus/test";
import { page } from "vite-plus/test/browser";
import { render } from "vitest-browser-react";
import { useEffect, useMemo, useRef, useState } from "react";

import { installFileEditorDismissal } from "./fileEditorDismissal";

interface AnnotationMetadata {
  label: string;
}

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

function EditableAnnotatedFile() {
  const [selectedLines, setSelectedLines] = useState<SelectedLineRange | null>(null);
  const [lineAnnotations, setLineAnnotations] = useState<LineAnnotation<AnnotationMetadata>[]>([]);
  const rootRef = useRef<HTMLDivElement>(null);
  const editor = useMemo(() => new Editor<AnnotationMetadata>(), []);

  useEffect(() => () => editor.cleanUp(), [editor]);
  useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    return installFileEditorDismissal({
      root,
      editor,
      isBlocked: () => false,
      onDismiss: () => setSelectedLines(null),
    });
  }, [editor]);

  return (
    <>
      <div ref={rootRef}>
        <EditorProvider editor={editor}>
          <File<AnnotationMetadata>
            file={{ name: "example.ts", contents: "one\ntwo\nthree\n" }}
            options={{
              disableFileHeader: true,
              enableGutterUtility: true,
              enableLineSelection: true,
              onGutterUtilityClick: setSelectedLines,
              onLineSelectionChange: setSelectedLines,
              onLineSelectionEnd: (range) => {
                setSelectedLines(range);
                if (range) {
                  setLineAnnotations([
                    {
                      lineNumber: Math.max(range.start, range.end),
                      metadata: { label: `${range.start}:${range.end}` },
                    },
                  ]);
                }
              },
            }}
            selectedLines={selectedLines}
            lineAnnotations={lineAnnotations}
            renderAnnotation={(annotation) => (
              <div data-test-file-annotation contentEditable={false}>
                {annotation.metadata.label}
              </div>
            )}
            disableWorkerPool
            contentEditable
          />
        </EditorProvider>
      </div>
      <button type="button">Outside file</button>
    </>
  );
}

async function getEditableFile() {
  const file = await vi.waitFor(() => {
    const element = document.querySelector<HTMLElement>("diffs-container");
    expect(element?.shadowRoot).not.toBeNull();
    return element!;
  });
  const content = await vi.waitFor(() => {
    const element = file?.shadowRoot?.querySelector<HTMLElement>("[data-content]") ?? null;
    expect(element).not.toBeNull();
    return element!;
  });
  return { file, content };
}

describe("editable Pierre file annotations", () => {
  afterEach(() => {
    document.body.innerHTML = "";
  });

  it("keeps gutter selection and annotations enabled while the file is editable", async () => {
    const screen = await render(<EditableAnnotatedFile />);

    try {
      const { file, content } = await getEditableFile();
      const secondLineNumber = await vi.waitFor(() => {
        const element =
          file?.shadowRoot?.querySelector<HTMLElement>('[data-column-number="2"]') ?? null;
        expect(element).not.toBeNull();
        return element;
      });
      await vi.waitFor(() => {
        expect(
          file?.shadowRoot?.querySelector("pre")?.hasAttribute("data-interactive-line-numbers"),
        ).toBe(true);
      });

      dispatchPointer(secondLineNumber!, "pointerdown", 1);
      dispatchPointer(secondLineNumber!, "pointerup", 1);

      await vi.waitFor(() => {
        expect(document.querySelector("[data-test-file-annotation]")?.textContent).toBe("2:2");
      });

      expect(content.contentEditable).toBe("true");
      expect(content.getAttribute("role")).toBe("textbox");
    } finally {
      await screen.unmount();
    }
  });

  it("dismisses editor focus and selection with outside click or Escape", async () => {
    const screen = await render(<EditableAnnotatedFile />);

    try {
      const { file, content } = await getEditableFile();
      content.focus();
      expect(file?.shadowRoot?.activeElement).toBe(content);

      await page.getByRole("button", { name: "Outside file" }).click();
      await vi.waitFor(() => {
        expect(file?.shadowRoot?.activeElement).not.toBe(content);
      });

      content.focus();
      expect(file?.shadowRoot?.activeElement).toBe(content);
      content.dispatchEvent(
        new KeyboardEvent("keydown", {
          key: "Escape",
          bubbles: true,
          cancelable: true,
          composed: true,
        }),
      );
      await vi.waitFor(() => {
        expect(file?.shadowRoot?.activeElement).not.toBe(content);
      });
    } finally {
      await screen.unmount();
    }
  });
});