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

// Mock the useTheme hook
vi.mock("@xtablo/shared/contexts/ThemeContext", () => ({
  useTheme: vi.fn(() => ({
    theme: "light",
    setTheme: vi.fn(),
  })),
}));

describe("ThemeSwitcher", () => {
  it("renders the theme switcher buttons", () => {
    render(<ThemeSwitcher />);

    // Check if all theme buttons are present
    expect(screen.getByLabelText("Mode clair")).toBeInTheDocument();
    expect(screen.getByLabelText("Mode système")).toBeInTheDocument();
    expect(screen.getByLabelText("Mode sombre")).toBeInTheDocument();
  });

  it("changes theme when a different theme button is clicked", async () => {
    const setTheme = vi.fn();
    const { useTheme } = await import("@xtablo/shared/contexts/ThemeContext");
    vi.mocked(useTheme).mockReturnValue({
      theme: "light",
      setTheme,
    });

    render(<ThemeSwitcher />);

    // Click the dark theme button
    fireEvent.click(screen.getByLabelText("Mode sombre"));

    // Verify that setTheme was called with 'dark'
    expect(setTheme).toHaveBeenCalledWith("dark");
  });

  it("renders collapsed version when isCollapsed is true", () => {
    render(<ThemeSwitcher isCollapsed={true} />);

    // In collapsed mode, there's only one button with cycling functionality
    const buttons = screen.getAllByRole("button");
    expect(buttons).toHaveLength(1);
  });
});
