import * as Sentry from "@sentry/react";
import Dinero from "dinero.js";
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from "react-router-dom";
import { PersistGate } from "redux-persist/integration/react";
import AppContainer from "./App/App.container";
import LoadingSpinner from "./components/loading-spinner/loading-spinner.component";
import "./index.css";
import { persistor, store } from "./redux/store";
import reportWebVitals from "./reportWebVitals";
import "./translations/i18n";
import "./utils/CleanAxios";
import { ConfigProvider } from "antd";
import InstanceRenderManager from "./utils/instanceRenderMgr";
import { registerSW } from "virtual:pwa-register";

window.global ||= window;

registerSW({ immediate: true });
//import { BrowserTracing } from "@sentry/tracing";
//import "antd/dist/antd.css";
// import "antd/dist/antd.less";

// Dinero.defaultCurrency = "CAD";
// Dinero.globalLocale = "en-CA";
Dinero.globalRoundingMode = "HALF_EVEN";

if (import.meta.env.PROD) {
  Sentry.init({
    dsn: InstanceRenderManager({
      imex: "https://fd7e89369b6b4bdc9c6c4c9f22fa4ee4@o492140.ingest.sentry.io/5651027",
      rome: "https://a6acc91c073e414196014b8484627a61@o492140.ingest.sentry.io/4504561071161344",
      promanager: "" //TODO:AIO Add in the sentry tracker for proman.
    }),

    ignoreErrors: [
      "ResizeObserver loop",
      "Module specifier, 'fs' does not start",
      "Module specifier, 'zlib' does not start with"
    ],
    integrations: [
      Sentry.replayIntegration({
        maskAllText: false,
        blockAllMedia: true
      }),
      new Sentry.BrowserTracing({})
    ],
    tracePropagationTargets: [
      "api.imex.online",
      "api.test.imex.online",
      "db.imex.online",
      "api.romeonline.io",
      "api.test.romeonline.io",
      "db.romeonline.io"
    ],
    tracesSampleRate: 1.0,
    replaysOnErrorSampleRate: 1.0,
    environment: import.meta.env.MODE
  });
}

const router = createBrowserRouter(createRoutesFromElements(<Route path="*" element={<AppContainer />} />));

if (import.meta.env.DEV) {
  let styles =
    "font-weight: bold; font-size: 50px;color: red;  6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) ";
  console.log("%c %s", styles, `VER: ${import.meta.env.VITE_APP_INSTANCE}`);
}

function App() {
  return (
    <PersistGate loading={<LoadingSpinner message="Restoring your settings..." />} persistor={persistor}>
      <Provider store={store}>
        <RouterProvider router={router} />
      </Provider>
    </PersistGate>
  );
}

// Used for ANTD Component Tokens
// https://ant.design/docs/react/migrate-less-variables
ReactDOM.createRoot(document.getElementById("root")).render(
  <ConfigProvider>
    <App />
  </ConfigProvider>
);

reportWebVitals();