import { fireEvent, screen } from "@testing-library/react";
import { afterEach, beforeAll, describe, expect, it } from "vitest";

import type { ToolcraftLayer } from "../../state/types";
import {
  cleanupLayersPanelTestEnv,
  installLayersPanelMatchMedia,
  renderLayersPanel,
} from "./layers-panel-test-utils";

beforeAll(() => {
  installLayersPanelMatchMedia();
});

afterEach(() => {
  cleanupLayersPanelTestEnv();
});

describe("LayersPanel visibility", () => {
  it("selects and toggles visible layers through runtime state", () => {
    const { container } = renderLayersPanel();

    fireEvent.click(screen.getByRole("option", { name: "Layer 2" }));
    expect(screen.getByTestId("selected-layer").textContent).toBe("layer-2");

    fireEvent.click(screen.getByRole("button", { name: "Hide Layer 1" }));
    expect(screen.getByTestId("layer-1-visible").textContent).toBe("false");

    fireEvent.click(screen.getByRole("button", { name: "Show Layer 1" }));
    expect(screen.getByTestId("layer-1-visible").textContent).toBe("true");

    fireEvent.click(screen.getByRole("button", { name: "Hide Scene Group" }));

    expect(container.querySelector('[data-layer-id="group-1"]')?.getAttribute("data-visible")).toBe(
      "false",
    );
    expect(container.querySelector('[data-layer-id="layer-1"]')?.getAttribute("data-visible")).toBe(
      "false",
    );
    expect(
      container
        .querySelector('[data-layer-id="group-1"] [data-layer-row-icon="group"]')
        ?.getAttribute("class"),
    ).toContain("opacity-30");
    expect(
      container
        .querySelector('[data-layer-id="group-1"] [data-layer-row-icon="group"]')
        ?.getAttribute("class"),
    ).not.toContain("opacity-60");
    expect(
      container
        .querySelector('[data-layer-id="group-1"] [data-layer-row-icon="group"]')
        ?.getAttribute("class"),
    ).not.toContain("group-hover/layer-row-icon-hit:opacity-100");
    expect(
      container
        .querySelector('[data-layer-id="layer-1"] [data-layer-row-icon="image"]')
        ?.getAttribute("class"),
    ).toContain("opacity-30");
    expect(
      container
        .querySelector('[data-layer-id="layer-1"] [data-layer-row-icon="image"]')
        ?.getAttribute("class"),
    ).not.toContain("opacity-60");
    expect(
      container.querySelector('[data-layer-id="layer-1"] [data-layer-actions]')?.getAttribute(
        "data-visible",
      ),
    ).toBe("false");
    expect(
      container
        .querySelector('[data-layer-id="layer-1"] [aria-label="Hide Layer 1"] svg')
        ?.getAttribute("style"),
    ).toContain("opacity: 0.3");
  });

  it("dims all nested descendant icons when a parent group is hidden", () => {
    const nestedLayers: ToolcraftLayer[] = [
      {
        collapsed: false,
        displayName: "Scene Group",
        id: "group-1",
        kind: "group",
        name: "scene-group",
        visible: true,
      },
      {
        collapsed: false,
        displayName: "Nested Group",
        id: "group-2",
        kind: "group",
        name: "nested-group",
        parentGroupId: "group-1",
        visible: true,
      },
      {
        displayName: "Layer 1",
        id: "layer-1",
        kind: "layer",
        name: "layer-1",
        parentGroupId: "group-2",
        visible: true,
      },
    ];
    const { container } = renderLayersPanel({}, nestedLayers, []);

    fireEvent.click(screen.getByRole("button", { name: "Hide Scene Group" }));

    expect(container.querySelector('[data-layer-id="group-2"]')?.getAttribute("data-visible")).toBe(
      "false",
    );
    expect(container.querySelector('[data-layer-id="layer-1"]')?.getAttribute("data-visible")).toBe(
      "false",
    );
    expect(
      container
        .querySelector('[data-layer-id="group-2"] [data-layer-row-icon="group"]')
        ?.getAttribute("class"),
    ).toContain("opacity-30");
    expect(
      container
        .querySelector('[data-layer-id="layer-1"] [data-layer-row-icon="layer"]')
        ?.getAttribute("class"),
    ).toContain("opacity-30");
  });
});