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 { SubsList, subsListLoader } from "./SubsList";
import { SubOrderSets, subOrderSetsLoader } from "./SubOrderSets";
import {
  SubOrderSet,
  subOrderSetLoader,
  subOrderSetAction,
} from "./SubOrderSet";

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: SubsList,
    loader: subsListLoader,
  },
  {
    path: "dashboard/subs/:username/",
    Component: SubOrderSets,
    loader: subOrderSetsLoader,
  },
  {
    path: "dashboard/subs/:username/new",
    Component: SubOrderSet,
  },
  {
    path: "dashboard/subs/:username/:set_id",
    Component: SubOrderSet,
    loader: subOrderSetLoader,
    action: subOrderSetAction,
  },
]);

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