import { describe, it, expect, vi } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import Modal from "./Modal";

describe("Modal", () => {
  it("renders children when open", () => {
    render(
      <Modal open onClose={() => {}}>
        <p>Modal content</p>
      </Modal>,
    );
    expect(screen.getByText("Modal content")).toBeInTheDocument();
  });

  it("does not render when closed", () => {
    render(
      <Modal open={false} onClose={() => {}}>
        <p>Hidden content</p>
      </Modal>,
    );
    expect(screen.queryByText("Hidden content")).not.toBeInTheDocument();
  });

  it("calls onClose when clicking backdrop", () => {
    const onClose = vi.fn();
    render(
      <Modal open onClose={onClose}>
        <p>Content</p>
      </Modal>,
    );

    const backdrop = screen.getByText("Content").closest("[class*='fixed']");
    if (backdrop) {
      fireEvent.click(backdrop);
      expect(onClose).toHaveBeenCalled();
    }
  });

  it("does not close when clicking content", () => {
    const onClose = vi.fn();
    render(
      <Modal open onClose={onClose}>
        <p>Content</p>
      </Modal>,
    );

    fireEvent.click(screen.getByText("Content"));
    expect(onClose).not.toHaveBeenCalled();
  });

  it("applies sheet variant by default", () => {
    render(
      <Modal open onClose={() => {}}>
        <p>Sheet</p>
      </Modal>,
    );
    const content = screen.getByText("Sheet").closest("div[class*='rounded']");
    expect(content?.className).toContain("rounded-t-3xl");
  });

  it("applies dialog variant", () => {
    render(
      <Modal open onClose={() => {}} variant="dialog">
        <p>Dialog</p>
      </Modal>,
    );
    const content = screen.getByText("Dialog").closest("div[class*='rounded']");
    expect(content?.className).toContain("rounded-2xl");
  });
});
