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 {
  buildResources,
  fallbackLng,
  getDefaultLocaleByLanguage,
  getTranslationsJSON,
  language,
  setLanguage,
} from "./locales";
import App from "./components/App";
import metricService from "./services/metric/metricService";
import "core-js/actual";
import { pdfjs } from "react-pdf";
import HeadData from "./utils/Helmet";
import Clarity from '@microsoft/clarity';
import { InitializationProvider } from "./initialization";

pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`;

const environments = import.meta.env;

const init = async () => {
  await setLanguage();
  const api = createApi();

  const [translationsResponse, elementsResponse, configResponse] =
    await Promise.all([
      api.getTranslations(null),
      api.getElements({ locale: language }),
      api.getAppConfig({ bundleId: "auraweb" }),
    ]);

  console.time('translations-loading');
  const translationsPlacement = await getTranslationsJSON(language);
  console.timeEnd('translations-loading');
  const resources = buildResources(translationsResponse, translationsPlacement);

  const legal = buildLegal(elementsResponse);
  const config = configResponse.data;
  const i18nextInstance = i18next.createInstance();
  const options = {
    resources,
    fallbackLng,
    postProcess: [`reactPostprocessor`],
    lng: getDefaultLocaleByLanguage(language),
  };
  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();
  // metricService.initMetricAB();

  if (isProduction) {
    smartLook();
  }

  const projectId = "pez69dq3lh"

  Clarity.init(projectId);

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

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

export default init;