import { describe, it, expect } from "vitest";
import { LocaleProvider } from "@/i18n/locale";
import { fireEvent, renderWithProviders, screen } from "@/test/render";
import { LanguageSwitcher } from "./language-switcher";

// LanguageSwitcher reads `useAppLocale()`, so it must render inside a
// LocaleProvider; renderWithProviders supplies the AppShell that `useT()` needs.
// Both the expanded and the icon-rail layouts are in the DOM (jsdom ignores the
// CSS that hides one), so each locale code appears on more than one button.
describe("LanguageSwitcher", () => {
  it("renders the Language heading and the EN / JA toggles", async () => {
    await renderWithProviders(
      <LocaleProvider>
        <LanguageSwitcher />
      </LocaleProvider>,
    );

    expect(await screen.findByText("Language")).toBeInTheDocument();
    expect(screen.getAllByRole("button", { name: "EN" }).length).toBeGreaterThan(0);
    expect(screen.getAllByRole("button", { name: "JA" }).length).toBeGreaterThan(0);
  });

  it("persists the chosen locale to localStorage", async () => {
    await renderWithProviders(
      <LocaleProvider>
        <LanguageSwitcher />
      </LocaleProvider>,
    );

    fireEvent.click((await screen.findAllByRole("button", { name: "JA" }))[0]);
    expect(localStorage.getItem("app-locale")).toBe("ja");

    fireEvent.click(screen.getAllByRole("button", { name: "EN" })[0]);
    expect(localStorage.getItem("app-locale")).toBe("en");
  });
});