import React from "react";
import { RouterProvider } from "react-router-dom";
import { ViewMode } from "./routes/ViewMode";
import { DisplayModeContext } from "./context/DisplayModeContext";
import { router } from "./router";
import "mapbox-gl/dist/mapbox-gl.css";
import "./style/SquareSpace/vars.css";
import "./style/SquareSpace/global.css";
import "./style/SquareSpace/blocks.css";
import "./style/SquareSpace/table.css";
import "./style/SquareSpace/video.css";
import "./style/thumbs.css";
import "./style/row.css";
import "./photos";

const defaultViewMode: ViewMode = location.href.includes("resistants")
  ? "photos"
  : "map";

export const App = () => {
  const [viewMode, setViewMode] = React.useState<ViewMode>(defaultViewMode);

  return (
    <DisplayModeContext.Provider
      value={{ mode: viewMode, setMode: setViewMode }}
    >
      <RouterProvider router={router} />
    </DisplayModeContext.Provider>
  );
};
