import { describe, it, expect, afterEach } from "vitest";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
import { LocaleProvider, useAppLocale } from "@/features/i18n/LocaleProvider";
import { LocaleSwitcher } from "@/features/i18n/LocaleSwitcher";

// LocaleSwitcher TDD
// - 현재 로케일에 따라 EN/KO 버튼 텍스트가 표시되어야 한다.
// - 버튼을 클릭하면 로케일이 토글되고, 하위 컴포넌트의 useAppLocale 결과도 함께 변경되어야 한다.

describe("LocaleSwitcher", () => {
  afterEach(() => {
    cleanup();
  });

  function LocaleConsumer() {
    const locale = useAppLocale();
    return <div data-testid="current-locale">{locale}</div>;
  }

  it("초기 로케일이 en 이면 버튼 텍스트는 EN 이어야 한다", () => {
    render(
      <LocaleProvider initialLocale="en">
        <LocaleSwitcher />
        <LocaleConsumer />
      </LocaleProvider>,
    );

    const button = screen.getByRole("button", { name: "Toggle locale" });
    const current = screen.getByTestId("current-locale");

		expect(button.textContent).toContain("EN");
		expect(current.textContent).toBe("en");
  });

  it("버튼을 클릭하면 로케일이 en/ko 사이에서 토글되어야 한다", () => {
    render(
      <LocaleProvider initialLocale="en">
        <LocaleSwitcher />
        <LocaleConsumer />
      </LocaleProvider>,
    );

    const button = screen.getByRole("button", { name: "Toggle locale" });
    const current = screen.getByTestId("current-locale");

		expect(current.textContent).toBe("en");
		expect(button.textContent).toContain("EN");

    fireEvent.click(button);

		expect(current.textContent).toBe("ko");
		expect(button.textContent).toContain("KO");
  });
});