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

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

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

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

describe("LayersPanel rendering", () => {
  it("renders grouped runtime layers", () => {
    const { container } = renderLayersPanel();

    expect(screen.getByText("Layers")).toBeTruthy();
    expect(screen.getByText("Scene Group")).toBeTruthy();
    expect(screen.getByText("Layer 1")).toBeTruthy();
    expect(screen.getByText("Layer 2")).toBeTruthy();
    expect(container.querySelector('[data-layer-row-icon="image"]')).toBeTruthy();
  });

  it("collapses groups and uses the shared panel host when floating", () => {
    const { container } = renderLayersPanel({ panelPlacement: "floating" });

    expect(container.querySelector('[data-panel-type="layers"]')).toBeTruthy();
    expect(container.querySelector('[data-snap-edges="left right"]')).toBeTruthy();

    const groupToggle = container.querySelector('[data-layer-row-icon-hit-area="group"]');

    expect(groupToggle).toBeTruthy();
    fireEvent.click(groupToggle as Element);

    expect(screen.getByTestId("group-collapsed").textContent).toBe("true");
    expect(screen.queryByText("Layer 1")).toBeNull();
  });
});