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

// LocaleProvider / useAppLocale / useLocaleActions TDD
// - initialLocale 로 전달된 로케일이 하위 컴포넌트에서 그대로 노출되는지 검증한다.
// - useLocaleActions 로 setLocale 을 호출하면 하위 컴포넌트의 로케일이 변경되어야 한다.

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

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

  function LocaleSetterButton({ next }: { next: "en" | "ko" }) {
    const { setLocale } = useLocaleActions();
    return (
      <button type="button" onClick={() => setLocale(next)}>
        set-{next}
      </button>
    );
  }

  it("initialLocale 로 en 을 전달하면 하위 컴포넌트에서 en 로케일을 읽을 수 있어야 한다", () => {
    render(
      <LocaleProvider initialLocale="en">
        <LocaleConsumer />
      </LocaleProvider>,
    );

    const current = screen.getByTestId("current-locale");

		expect(current.textContent).toBe("en");
  });

  it("setLocale 을 호출하면 하위 컴포넌트의 useAppLocale 결과가 업데이트되어야 한다", () => {
    render(
      <LocaleProvider initialLocale="en">
        <LocaleConsumer />
        <LocaleSetterButton next="ko" />
      </LocaleProvider>,
    );

    const current = screen.getByTestId("current-locale");

		expect(current.textContent).toBe("en");

    fireEvent.click(screen.getByText("set-ko"));

    expect(current.textContent).toBe("ko");
  });
});