import i18n from "i18next";
import { initReactI18next } from "react-i18next";

import ptBR from "./pt-BR";
import en from "./en";
import es from "./es";

const LANGUAGE_STORAGE_KEY = "@app:language";

const getDeviceLanguage = (): string => {
  if (typeof window === "undefined") return "pt-BR";

  const browserLanguage = navigator.language;

  if (browserLanguage.startsWith("pt")) return "pt-BR";
  if (browserLanguage.startsWith("es")) return "es";
  if (browserLanguage.startsWith("en")) return "en";

  return "pt-BR";
};

const resources = {
  "pt-BR": ptBR,
  en: en,
  es: es,
};

const initI18n = () => {
  let savedLanguage: string | null = null;

  if (typeof window !== "undefined") {
    savedLanguage = localStorage.getItem(LANGUAGE_STORAGE_KEY);

    if (!savedLanguage) {
      savedLanguage = getDeviceLanguage();
      localStorage.setItem(LANGUAGE_STORAGE_KEY, savedLanguage);
    }
  }

  i18n.use(initReactI18next).init({
    resources,
    lng: savedLanguage || "pt-BR",
    fallbackLng: "pt-BR",

    interpolation: {
      escapeValue: false,
    },

    react: {
      useSuspense: false,
    },
  });
};

if (typeof window !== "undefined") {
  initI18n();
}

export const changeLanguage = (language: string) => {
  i18n.changeLanguage(language);
  if (typeof window !== "undefined") {
    localStorage.setItem(LANGUAGE_STORAGE_KEY, language);
  }
};

export const availableLanguages = [
  { code: "pt-BR", name: "Português", flag: "br" },
  { code: "en", name: "English", flag: "us" },
  { code: "es", name: "Español", flag: "es" },
];

export default i18n;