import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Capacitor } from "@capacitor/core";
import App from "./App";
import { BottomDisplayApp } from "./platform/BottomDisplayApp";
import { startControllerInput } from "./input/controller";
import { currentDisplayLayout } from "./platform/displayLayout";
import "./styles.css";

const nativeLayoutRequested = new URLSearchParams(window.location.search).has("nativeLayout");
const displayMode = new URLSearchParams(window.location.search).get("display");
const displayLayout = currentDisplayLayout();

if (Capacitor.isNativePlatform() || nativeLayoutRequested) {
  document.documentElement.classList.add("native-platform");
}
if (displayMode === "top" || displayMode === "bottom") {
  document.documentElement.dataset.displaySurface = displayMode;
}
document.documentElement.dataset.displayLayout = displayLayout;

startControllerInput();

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    {displayMode === "bottom" ? <BottomDisplayApp /> : <App />}
  </StrictMode>,
);