import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter } from "react-router";
import { RouterProvider } from "react-router/dom";
import {
  createTheme,
  MantineProvider,
  Input,
  Paper,
  Slider,
} from "@mantine/core";
import { Notifications } from "@mantine/notifications";

import "@mantine/core/styles.css";
import "@mantine/dates/styles.css";
import "@mantine/notifications/styles.css";

import { Dashboard, subsListLoader } from "./Dashboard";
import { SubOrderSets, subOrderSetsLoader } from "./SubOrderSets";
import { OrderSet, orderSetLoader, orderSetAction } from "./OrderSet";
import { UserContextProvider } from "./UserContext";

const theme = createTheme({
  components: {
    InputWrapper: Input.Wrapper.extend({
      defaultProps: {
        inputWrapperOrder: ["label", "input", "description", "error"],
        mb: "xs",
      },
    }),
    Paper: Paper.extend({
      defaultProps: {
        p: "sm",
        shadow: "xs",
        mb: "lg",
      },
    }),
    Slider: Slider.extend({
      vars: (theme) =>
        ({
          root: {
            "--slider-track-bg": theme.colors.gray[4],
          },
        }) as any,
    }),
  },
});

const router = createBrowserRouter([
  {
    path: "dashboard",
    Component: Dashboard,
    loader: subsListLoader,
  },
  {
    path: "orders/:username",
    Component: SubOrderSets,
    loader: subOrderSetsLoader,
  },
  {
    path: "orders/:username/new",
    Component: OrderSet,
  },
  {
    path: "orders/:username/:set_id",
    Component: OrderSet,
    loader: orderSetLoader,
    action: orderSetAction,
  },
]);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <MantineProvider theme={theme}>
      <UserContextProvider>
        <Notifications />
        <RouterProvider router={router} />
      </UserContextProvider>
    </MantineProvider>
  </React.StrictMode>,
);