import { render, screen, fireEvent } from "@testing-library/react";
import { vi } from "vitest";

import { Drawer } from "../Drawer";

describe("Drawer", () => {
  it("renders children when open=true", () => {
    render(
      <Drawer open={true} onClose={() => {}} side="right">
        <p>Контент панели</p>
      </Drawer>,
    );
    expect(screen.getByText("Контент панели")).toBeInTheDocument();
  });

  it("does not show children interactively when open=false", () => {
    render(
      <Drawer open={false} onClose={() => {}} side="right">
        <p>Скрытый контент</p>
      </Drawer>,
    );
    // Panel is in DOM but aria-hidden overlay
    const overlay = document.querySelector('[aria-hidden="true"]');
    expect(overlay).toBeInTheDocument();
  });

  it("calls onClose when Escape is pressed", () => {
    const onClose = vi.fn();
    render(
      <Drawer open={true} onClose={onClose} side="right">
        <p>Контент</p>
      </Drawer>,
    );
    fireEvent.keyDown(document, { key: "Escape" });
    expect(onClose).toHaveBeenCalledTimes(1);
  });

  it("renders with role=dialog when open", () => {
    render(
      <Drawer open={true} onClose={() => {}} side="bottom">
        <p>Bottom sheet</p>
      </Drawer>,
    );
    expect(screen.getByRole("dialog")).toBeInTheDocument();
  });

  it("applies translateY(0) for bottom side when open", () => {
    const { container } = render(
      <Drawer open={true} onClose={() => {}} side="bottom">
        <p>Bottom</p>
      </Drawer>,
    );
    // The panel div is second child of dialog div
    const dialog = container.querySelector('[role="dialog"]');
    const panel = dialog?.querySelector("div");
    expect(panel?.style.transform).toBe("translateY(0)");
  });
});
