import { derived, writable } from "svelte/store";
import translations from "./translations";

const browserLocale = navigator.language || "en";
const [baseLang, region] = browserLocale.split("-");

export const DEFAULT_LOCALE = translations[browserLocale] ? browserLocale : translations[baseLang] ? baseLang :"en";
export const locale = writable(DEFAULT_LOCALE);
export const locales = Object.entries(translations).map(([key, lang]) => [key, lang.name]);

function translate(locale, key, vars = {}) {
  if (!key) throw new Error("Translation key is required.");

  const validLocale = translations[locale]
    ? locale
    : translations[baseLang]
    ? baseLang
    : "en";

  let text = translations[validLocale][key] || translations["en"][key];

  if (!text) {
    console.error(`Missing translation for key "${key}" in locale "${validLocale}".`);
    return key;
  }

  return Object.entries(vars).reduce(
    (str, [varKey, value]) => str.replaceAll(`{{${varKey}}}`, value),
    text
  );
}

export const t = derived(locale, ($locale) => (key, vars = {}) =>
  translate($locale, key, vars)
);