import React from "react";
import i18next from "i18next";
import ReactPostprocessor from "i18next-react-postprocessor";
import { BrowserRouter } from "react-router-dom";
import { I18nextProvider, initReactI18next } from "react-i18next";
import { Provider } from "react-redux";
import { store } from "./store";
import { AuthProvider } from "./auth";
import { ApiContext, createApi } from "./api";
import { LegalContext, buildLegal } from "./legal";
import { getClientLocale, buildResources, fallbackLng } from "./locales";
import App from "./components/App";
import metricService from "./services/metric/metricService";

const environments = import.meta.env;

const init = async () => {
  const api = createApi();
  const lng = getClientLocale();
  const [translationsResponse, elementsResponse, configResponse] =
    await Promise.all([
      api.getTranslations(null),
      api.getElements({ locale: lng }),
      api.getAppConfig({ bundleId: "auraweb" }),
    ]);
  const resources = buildResources(translationsResponse);
  const legal = buildLegal(elementsResponse);
  const config = configResponse.data;
  const i18nextInstance = i18next.createInstance();
  const options = {
    lng,
    resources,
    fallbackLng,
    postProcess: [`reactPostprocessor`],
  };
  await i18nextInstance
    .use(initReactI18next)
    .use(new ReactPostprocessor())
    .init(options);

  const isProduction = environments.MODE === "production";

  // SCRIPTS TO HEAD
  const smartLook = () => {
    if (!config.smartlook_manage) return;
    const script = document.createElement("script");
    script.setAttribute("src", "/metrics/smartlook.js");
    document.head.appendChild(script);
  };

  metricService.initMetric();

  if (isProduction) {
    smartLook();
  }

  // const googleManager = () => {
  //   const script = document.createElement("script");
  //   script.setAttribute("src", "/metrics/google-manager.js");
  //   document.head.appendChild(script);
  // };
  // googleManager();

  return (
    <React.Fragment>
      <I18nextProvider i18n={i18nextInstance}>
        <Provider store={store}>
          <BrowserRouter>
            <ApiContext.Provider value={api}>
              <AuthProvider>
                <LegalContext.Provider value={legal}>
                  <App />
                </LegalContext.Provider>
              </AuthProvider>
            </ApiContext.Provider>
          </BrowserRouter>
        </Provider>
      </I18nextProvider>
    </React.Fragment>
  );
};

export default init;