import React from "react";
import { AuthProvider } from "Context/Auth";
import { GlobalProvider } from "Context/Global";
import Main from "Routes/routes";
import "@uppy/core/dist/style.css";
import "@uppy/dashboard/dist/style.css";
import { BrowserRouter as Router } from "react-router-dom";
import "react-loading-skeleton/dist/skeleton.css";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";

import "@fontsource/inter"; // Defaults to weight 400
import "@fontsource/roboto-mono"; // Defaults to weight 400
import WireframeBuilderProvider from "Components/WireframeBuilder/reducers/WireframeBuilderContext";
import { ErrorBoundary } from "Components/ErrorBoundary";

import Hotjar from "@hotjar/browser";
import { LazyLoad } from "Components/LazyLoad";

const siteId = 5128711;
const hotjarVersion = 6;

Hotjar.init(siteId, hotjarVersion);

const stripePromise = loadStripe(
  "pk_test_51Ll5ukBgOlWo0lDUrBhA2W7EX2MwUH9AR5Y3KQoujf7PTQagZAJylWP1UOFbtH4UwxoufZbInwehQppWAq53kmNC00UIKSmebO"
);

function App() {
  return (
    <LazyLoad brand>
      <AuthProvider>
        <GlobalProvider>
          <WireframeBuilderProvider>
            <ErrorBoundary fallback={<div>Error</div>}>
              <Router>
                <Elements stripe={stripePromise}>
                  <Main />
                </Elements>
              </Router>
            </ErrorBoundary>
          </WireframeBuilderProvider>
        </GlobalProvider>
      </AuthProvider>
    </LazyLoad>
  );
}

export default App;
