import React from "react";
import { HashRouter } from "react-router-dom";
import { StrictMode, createRoot } from "@wordpress/element";
import App from "./App";
import { ViewModeProvider } from "./contexts/ViewModeContext";
import { SettingsProvider } from "./contexts/SettingsContext";
import { GridManagerProvider } from "./contexts/GridManagerContext";
import { NavigationProvider } from "./contexts/NavigationContext";
import { UpgradePopoverProvider } from "./contexts/UpgradePopoverContext";
import { SiteStatusProvider } from "./contexts/SiteStatusContext";

const rootElement = document.getElementById("sfsync-settings-page");

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

  root.render(
    <StrictMode>
      <ViewModeProvider>
        <SiteStatusProvider>
          <NavigationProvider>
            <SettingsProvider>
              <UpgradePopoverProvider>
                <GridManagerProvider>
                  <HashRouter>
                    <App />
                  </HashRouter>
                </GridManagerProvider>
              </UpgradePopoverProvider>
            </SettingsProvider>
          </NavigationProvider>
        </SiteStatusProvider>
      </ViewModeProvider>
    </StrictMode>
  );
}