buzz-sheet/components/public/export-language.tsx

"use client";

import { useSyncExternalStore } from "react";

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

export type ExportLanguage = "th" | "en";

const STORAGE_KEY = "buzz-sheet:export-language";
const LANGUAGE_EVENT = "buzz-sheet:export-language-change";
let memoryLanguage: ExportLanguage = "th";

function storedLanguage(): ExportLanguage {
  if (typeof window === "undefined") return "th";
  try {
    memoryLanguage = window.localStorage.getItem(STORAGE_KEY) === "en" ? "en" : "th";
    return memoryLanguage;
  } catch {
    return memoryLanguage;
  }
}

export function useExportLanguage() {
  const language = useSyncExternalStore(
    (onStoreChange) => {
      window.addEventListener(LANGUAGE_EVENT, onStoreChange);
      window.addEventListener("storage", onStoreChange);
      return () => {
        window.removeEventListener(LANGUAGE_EVENT, onStoreChange);
        window.removeEventListener("storage", onStoreChange);
      };
    },
    storedLanguage,
    () => "th",
  );

  function setLanguage(next: ExportLanguage) {
    memoryLanguage = next;
    try {
      window.localStorage.setItem(STORAGE_KEY, next);
    } catch {
      // Browser storage is optional; the current export still uses the selection.
    } finally {
      window.dispatchEvent(new CustomEvent(LANGUAGE_EVENT, { detail: next }));
    }
  }

  return [language, setLanguage] as const;
}

export function ExportLanguageToggle({
  language,
  onChange,
}: {
  language: ExportLanguage;
  onChange: (language: ExportLanguage) => void;
}) {
  return (
    <ToggleGroup
      aria-label="ภาษาในภาพส่งออก"
      variant="outline"
      size="sm"
      value={[language]}
      onValueChange={(values) => {
        const next = values[0];
        if (next === "th" || next === "en") onChange(next);
      }}
    >
      <ToggleGroupItem
        value="th"
      >
        ไทย
      </ToggleGroupItem>
      <ToggleGroupItem
        value="en"
      >
        English
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

export function ExportText({ th, en }: { th: string; en: string }) {
  return (
    <>
      <span data-export-lang="th">{th}</span>
      <span data-export-lang="en">{en}</span>
    </>
  );
}