import React, {
  createContext, useContext, useReducer,
} from "react";
import fi from "./locales/fi/common.json";
import en from "./locales/en/common.json";

type Lang = "fi" | "en";
const LOCAL_STORAGE_KEY = "locale";

type TranslateFunc = (key: string) => string;

const translateEn: TranslateFunc = (key) => {
  const res = en[key];
  if (!res) {
    console.warn(`Locale 'en' has no key: ${key}!`);
  }
  return res || key;
};

const translateFi: TranslateFunc = (key) => {
  const res = fi[key];
  if (!res) {
    // Silence warnings for Finnish
    // console.warn(`Locale 'en' has no key: ${key}!`);
  }
  return res || key;
};

interface Store {
  language: Lang;
  changeLanguage: React.Dispatch<Lang>,
}

let initialLanguage: Lang = "fi";
try {
  const storedLang = localStorage.getItem(LOCAL_STORAGE_KEY) as Lang;
  initialLanguage = storedLang;
} catch (err) {
  // Just ignore if fails to get value from browser (server etc.)
}

const initialState: Store = {
  language: initialLanguage,
  changeLanguage: null,
};

const Reducer = (state: Store, action: Lang) => {
  switch (action) {
    case "fi":
      return {
        ...state,
        language: action,
      };
    case "en":
      return {
        ...state,
        language: action,
      };
    default:
      return state;
  }
};

const LocaleContext = createContext(initialState);

const LocaleStore: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(Reducer, initialState);
  const changeLanguage = (action: Lang) => {
    dispatch(action);
    try {
      localStorage.setItem(LOCAL_STORAGE_KEY, action);
    } catch (err) {
      // Just ignore if fails to store value in user's browser
    }
  };
  return (
    <LocaleContext.Provider value={{ ...state, changeLanguage }}>
      {children}
    </LocaleContext.Provider>
  );
};

export default LocaleStore;

const useTranslation = () => {
  const { language, changeLanguage } = useContext(LocaleContext);
  const t = language === "en" ? translateEn : translateFi;

  return {
    t,
    i18n: {
      language,
      changeLanguage,
    },
  };
};

export { useTranslation };
