import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { afterEach, expect, it } from "vitest";
import { defineToolcraft } from "../../schema/define-toolcraft";
import { ToolcraftRoot } from "./toolcraft-root";
import {
  ToolcraftThemeProvider,
  useToolcraftTheme,
  TOOLCRAFT_THEME_PREFERENCE_STORAGE_KEY,
} from "./theme-runtime";

afterEach(() => {
  cleanup();
  window.localStorage.clear();
});

function ThemeProbe({ name }: { name: string }) {
  const theme = useToolcraftTheme();
  return (
    <button onClick={theme.toggleResolvedTheme} type="button">
      {name}: {theme.resolvedTheme}
    </button>
  );
}

it("shares an ancestor theme across app roots while preserving their portal boundaries", () => {
  const schemas = ["Main", "Layers"].map((id) =>
    defineToolcraft({
      base: {
        identity: { id, title: id },
        canvas: { enabled: false },
        panels: {},
        toolbar: { history: false },
      },
      modules: [],
    }),
  );
  const { container } = render(
    <ToolcraftThemeProvider defaultPreference="light">
      {schemas.map((schema) => (
        <ToolcraftRoot key={schema.identity.id} schema={schema}>
          <ThemeProbe name={schema.identity.title} />
        </ToolcraftRoot>
      ))}
    </ToolcraftThemeProvider>,
  );

  expect(screen.getByRole("button", { name: "Main: light" })).toBeTruthy();
  expect(screen.getByRole("button", { name: "Layers: light" })).toBeTruthy();
  fireEvent.click(screen.getByRole("button", { name: "Main: light" }));
  expect(screen.getByRole("button", { name: "Main: dark" })).toBeTruthy();
  expect(screen.getByRole("button", { name: "Layers: dark" })).toBeTruthy();
  const roots = container.querySelectorAll("[data-toolcraft-input-scope]");
  expect(roots).toHaveLength(2);
  for (const root of roots) {
    expect(root.querySelectorAll("[data-toolcraft-portal-root]")).toHaveLength(1);
    expect(
      root.querySelector("[data-toolcraft-theme-scope]")?.getAttribute("data-toolcraft-theme"),
    ).toBe("dark");
  }
  expect(window.localStorage.getItem(TOOLCRAFT_THEME_PREFERENCE_STORAGE_KEY)).toBe("dark");
});