import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { SlideOver } from "@/components/ui/SlideOver";

// Das Panel bleibt geschlossen im DOM, damit die Schiebebewegung laufen kann.
// Es steht dann per translate-x-full hinter dem rechten Bildschirmrand — die
// eigene linke Kante genau auf dem Rand. Ein Schatten reicht von dort noch
// ins Bild zurück, und die Protokollseite rendert ein Panel je Zeile: fünfzig
// Schatten an derselben Stelle ergaben einen fast schwarzen Streifen neben
// der Bildlaufleiste.

function panel(container: HTMLElement): HTMLElement {
  const el = container.querySelector('[role="dialog"]');
  expect(el, "Das Panel fehlt").not.toBeNull();
  return el as HTMLElement;
}

describe("SlideOver", () => {
  it("bleibt geschlossen im DOM", () => {
    // Ohne das gäbe es keine Schiebebewegung beim Schliessen — und dieser
    // Test hier hätte keinen Gegenstand.
    const { container } = render(
      <SlideOver open={false} onClose={() => {}} title="Titel">
        Inhalt
      </SlideOver>
    );
    expect(panel(container).className).toContain("translate-x-full");
  });

  it("trägt geschlossen keinen Schatten", () => {
    const { container } = render(
      <SlideOver open={false} onClose={() => {}} title="Titel">
        Inhalt
      </SlideOver>
    );
    expect(panel(container).className).not.toContain("shadow-");
  });

  it("trägt geöffnet einen Schatten", () => {
    const { container } = render(
      <SlideOver open onClose={() => {}} title="Titel">
        Inhalt
      </SlideOver>
    );
    expect(panel(container).className).toContain("shadow-[var(--shadow-overlay)]");
    expect(panel(container).className).toContain("translate-x-0");
  });

  it("nimmt das geschlossene Panel aus der Bedienung", () => {
    // `inert` und nicht aria-hidden: nur das entfernt die Felder auch aus der
    // Tabulatorreihenfolge und blockiert Klicks.
    const { container } = render(
      <SlideOver open={false} onClose={() => {}} title="Titel">
        Inhalt
      </SlideOver>
    );
    expect(panel(container).closest("[inert]")).not.toBeNull();
  });

  it("benennt den Dialog nach seiner Überschrift", () => {
    render(
      <SlideOver open onClose={() => {}} title="Anton Aigner">
        Inhalt
      </SlideOver>
    );
    expect(screen.getByRole("dialog", { name: "Anton Aigner" })).toBeInTheDocument();
  });
});