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

// Mock the useClickOutside hook
vi.mock("@xtablo/shared/hooks/useClickOutside", () => ({
  useClickOutside: (callback: () => void) => {
    const ref = { current: null } as { current: null; callback?: () => void };
    // Store callback for testing
    ref.callback = callback;
    return ref;
  },
}));

describe("ClickOutside", () => {
  it("renders without crashing", () => {
    const onClickOutside = vi.fn();
    render(
      <ClickOutside onClickOutside={onClickOutside}>
        <div>Test Content</div>
      </ClickOutside>
    );
    expect(screen.getByText("Test Content")).toBeInTheDocument();
  });

  it("renders children correctly", () => {
    const onClickOutside = vi.fn();
    render(
      <ClickOutside onClickOutside={onClickOutside}>
        <button>Click Me</button>
      </ClickOutside>
    );
    expect(screen.getByText("Click Me")).toBeInTheDocument();
  });

  it("applies custom className", () => {
    const onClickOutside = vi.fn();
    const { container } = render(
      <ClickOutside onClickOutside={onClickOutside} className="custom-class">
        <div>Test Content</div>
      </ClickOutside>
    );
    expect(container.firstChild).toHaveClass("custom-class");
  });

  it("renders with disabled prop", () => {
    const onClickOutside = vi.fn();
    render(
      <ClickOutside onClickOutside={onClickOutside} disabled={true}>
        <div>Test Content</div>
      </ClickOutside>
    );
    expect(screen.getByText("Test Content")).toBeInTheDocument();
  });
});
