import React from "react";
import { RouterProvider } from "react-router-dom";
import { ViewMode } from "./routes/ViewMode";
import { DisplayModeContext } from "./context/DisplayModeContext";
import { HomeContext } from "./context/HomeContext";
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";
import "./declarations";

interface Props {
  defaultViewMode: ViewMode;
  home: boolean;
}

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

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