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

const mockChangeLanguage = vi.fn();

// Mock react-i18next
vi.mock("react-i18next", () => ({
  useTranslation: () => ({
    i18n: {
      language: "en",
      changeLanguage: mockChangeLanguage,
    },
  }),
}));

describe("LanguageSelector", () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it("renders without crashing", () => {
    render(<LanguageSelector />);
    // The SelectTrigger should be present
    const trigger = screen.getByRole("combobox");
    expect(trigger).toBeInTheDocument();
  });

  it("displays the select component", () => {
    const { container } = render(<LanguageSelector />);
    expect(container.querySelector('[role="combobox"]')).toBeInTheDocument();
  });

  it("shows current language selection", () => {
    render(<LanguageSelector />);
    // The trigger should show the current language code
    expect(screen.getByRole("combobox")).toBeInTheDocument();
  });

  it("opens language options when clicked", () => {
    render(<LanguageSelector />);
    const trigger = screen.getByRole("combobox");
    fireEvent.click(trigger);

    // Language options should appear
    expect(screen.getByRole("option", { name: /English/i })).toBeInTheDocument();
    expect(screen.getByRole("option", { name: /Français/i })).toBeInTheDocument();
  });

  it("changes language when option is selected", () => {
    render(<LanguageSelector />);
    const trigger = screen.getByRole("combobox");
    fireEvent.click(trigger);

    const frenchOption = screen.getByRole("option", { name: /Français/i });
    fireEvent.click(frenchOption);

    expect(mockChangeLanguage).toHaveBeenCalledWith("fr");
  });
});
