import {
  type LabInstanceContextValues,
} from "@/components/labs/lab-instance-context";
import { mockLabsApi } from "@/testutils/mock-lab";
import { mockNextNavigationModule } from "@/testutils/mock-next-navigation";
import { ProvidersWrapper } from "@/testutils/providers";
import { act, queries, render } from "@testing-library/react";
import { expect, suite, test } from "vitest";

mockLabsApi();
mockNextNavigationModule();

suite("lab-remark", async () => {
  const { getRemarkProcessor } = await import("@/components/lab-remark");
  const { LabInstanceContext } = await import('@/components/labs/lab-instance-context')
  const processor = getRemarkProcessor("en");

  test("outcome link", async () => {
    const { result } = processor.processSync(
      "[some url](https://example.com/)"
    );

    const ui = render(result);

    const link = ui.queryByText("some url");
    expect(link).toHaveProperty("href", "https://example.com/");
    expect(link).toHaveProperty("target", "_blank");
  });

  test("anchor link", async () => {
    const { result } = processor.processSync("[some url](#some-id)");

    const ui = render(result);

    const link = ui.queryByText("some url");
    expect(link).toHaveProperty(
      "href",
      new URL("#some-id", location.href).toString()
    );
    expect(link).not.toHaveProperty("target", "_blank");
  });

  suite("extended image grammar", () => {
    test("image size", async () => {
      const { result } = processor.processSync("![alt](#some-id)");

      const ui = render(result, { wrapper: ProvidersWrapper });

      const img = ui.queryByRole("img");
      expect(img).toHaveProperty("alt", "alt");
      expect(img).toHaveProperty(
        "src",
        new URL("#some-id", location.href).toString()
      );
      expect(img).not.toHaveAttribute("style");
    });

    test("image size with alt", async () => {
      const { result } = processor.processSync("![alt 80%](#some-id)");

      const ui = render(result, { wrapper: ProvidersWrapper });

      const img = ui.queryByRole("img");
      expect(img).toHaveProperty("alt", "alt");
      expect(img).toHaveProperty(
        "src",
        new URL("#some-id", location.href).toString()
      );
      expect(img).toHaveStyle({ width: "80%" });
    });

    test("image size without alt", async () => {
      const { result } = processor.processSync("![80px](#some-id)");

      const ui = render(result, { wrapper: ProvidersWrapper });

      const img = ui.queryByRole("img");
      expect(img).toHaveProperty("alt", "#some-id");
      expect(img).toHaveProperty(
        "src",
        new URL("#some-id", location.href).toString()
      );
      expect(img).toHaveStyle({ width: "80px" });
    });
  });

  test("web ssh button", async () => {
    const { result } = processor.processSync(
      "[some url](ssh://role1-ssh#1) [some invalid url](ssh://role2-ssh#2)"
    );

    const ui = await act(() =>
      render(
        <LabInstanceContext
          value={
            {
              resources: [
                {
                  resources: [
                    {
                      Role: "role1-ssh",
                      Type: "Web SSH",
                      Endpoint: "about:blank",
                    },
                  ],
                },
              ],
            } as LabInstanceContextValues
          }
        >
          {result}
        </LabInstanceContext>,
        {
          wrapper: ProvidersWrapper,
          queries,
        }
      )
    );
    expect(
      ui.queryByText("some url", { selector: "button" })
    ).not.toBeDisabled();
    expect(
      ui.queryByText("some invalid url", { selector: "button" })
    ).toBeDisabled();
  });
});