import isPropValid from "@emotion/is-prop-valid";
import * as Sentry from "@sentry/react";
import { Amplify } from "aws-amplify";
import React, { Suspense } from "react";
import { createRoot } from "react-dom/client";
import padStart from "string.prototype.padstart";
import { StyleSheetManager } from "styled-components";

import App from "./App";
import constants from "./constants";
import { configureAxiosInterceptors } from "./services/api/axios";
import CognitoConfig from "./services/auth/cognito-config";
import * as imagePrefetch from "./services/prefetch/images";
import GlobalStyles from "./styles/global";

import "./services/i18ln";
import "./styles/globals.css";
import "@keepoinc/site-page-react-component/globals.css";

padStart.shim();

if (constants.release) {
  Sentry.init({
    dsn: "https://d47ede245f3e0b05d56d7d3c36171edb@o4511368648654848.ingest.us.sentry.io/4511368650227712",
    sendDefaultPii: true,
    tracesSampleRate: 0.2,
    release: constants.release,
  });
}

Amplify.configure(CognitoConfig);

configureAxiosInterceptors();

imagePrefetch.fetch();

const rootElement = document.getElementById("root");

if (rootElement) {
  const root = createRoot(rootElement);

  root.render(
    <React.StrictMode>
      <StyleSheetManager shouldForwardProp={isPropValid}>
        <GlobalStyles />
        <Suspense fallback={null}>
          <App />
          <span data-version={APP_VERSION} style={{ display: "none" }} />
        </Suspense>
      </StyleSheetManager>
    </React.StrictMode>
  );
} else {
  console.log("Root element not found");
}