import { createContext, useMemo } from "react";
import type { ReactNode } from "react";
import useLocalStorage from "~/utils/useLocalStorage";
import { localization } from "~/utils/localization";
import type {
  CurrentLocale,
  PageText,
  SetCurrentLocale,
} from "~/interfaces/simulator";

let locale: CurrentLocale = "en";

if (typeof window !== "undefined") {
  const lang = window.navigator.language;
  if (lang.includes("pt")) {
    locale = "pt";
  }
}

export type LocalizationContextType = {
  localization: PageText;
  currentLocale: CurrentLocale;
  setCurrentLocale: SetCurrentLocale;
};

export const LocalizationContext = createContext({
  localization: localization[locale],
  currentLocale: locale,
  setCurrentLocale: (
    _: CurrentLocale | ((val: CurrentLocale) => CurrentLocale)
  ) => {
    return;
  },
});

export default function LocalizationProvider({
  children,
}: {
  children: ReactNode;
}) {
  const [currentLocale, setCurrentLocale] = useLocalStorage<CurrentLocale>(
    "locale",
    locale
  );
  const currentLocalization = useMemo(() => {
    return localization[currentLocale];
  }, [currentLocale]);

  return (
    <LocalizationContext.Provider
      value={{
        localization: currentLocalization,
        currentLocale,
        setCurrentLocale,
      }}
    >
      {children}
    </LocalizationContext.Provider>
  );
}