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 { TopPostsManagerProvider } from "./contexts/TopPostsManagerContext";
import { DateRangePickerProvider } from "@app/components/date-range-picker/DateRangePickerContext";
import { UpgradePopoverProvider } from "./contexts/UpgradePopoverContext";

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

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

  root.render(
    <StrictMode>
      <ViewModeProvider>
        <SettingsProvider>
          <UpgradePopoverProvider>
            <TopPostsManagerProvider>
              <HashRouter>
                <DateRangePickerProvider>
                  <App />
                </DateRangePickerProvider>
              </HashRouter>
            </TopPostsManagerProvider>
          </UpgradePopoverProvider>
        </SettingsProvider>
      </ViewModeProvider>
    </StrictMode>
  );
}