import ReactDOM from "react-dom/client";
import { useEffect } from "react";
import "./index.css";
import { RouterProvider } from "react-router-dom";
import { router } from "./routes/router";
import { UserProvider } from "./hooks/useUser";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { CacheProvider } from "@emotion/react";
import rtlPlugin from "stylis-plugin-rtl";
import createCache from "@emotion/cache";
import { prefixer } from "stylis";
import { heIL } from "@mui/x-data-grid/locales";

const theme = createTheme(
  {
    direction: "rtl",
    typography: {
      fontFamily: [
        "Lunasima", // Add the 'Lunasima' font
        "sans-serif",
      ].join(","),
    },
  },
  heIL
);

const cacheRtl = createCache({
  key: "muirtl",
  stylisPlugins: [prefixer, rtlPlugin],
});

const InputGuards = () => {
  useEffect(() => {
    const onWheel = (event: WheelEvent) => {
      const target = event.target;
      if (target instanceof HTMLInputElement && target.type === "number") {
        event.preventDefault();
      }
    };

    const onKeyDown = (event: KeyboardEvent) => {
      const target = event.target;
      if (
        target instanceof HTMLInputElement &&
        target.type === "number" &&
        (event.key === "ArrowUp" || event.key === "ArrowDown")
      ) {
        event.preventDefault();
      }
    };

    document.addEventListener("wheel", onWheel, { passive: false });
    document.addEventListener("keydown", onKeyDown);

    return () => {
      document.removeEventListener("wheel", onWheel);
      document.removeEventListener("keydown", onKeyDown);
    };
  }, []);

  return null;
};

ReactDOM.createRoot(document.getElementById("root")!).render(
  <CacheProvider value={cacheRtl}>
    <ThemeProvider theme={theme}>
      <UserProvider>
        <InputGuards />
        <RouterProvider router={router} />
      </UserProvider>
    </ThemeProvider>
  </CacheProvider>
);