import React, {useContext, useLayoutEffect} from 'react';
import {HookRouter, navigate, usePath, useRoutes} from "hookrouter";
import {Page, Tabs} from "./primitives/Layout";
import {IconElement} from "./primitives/Elements";
import SettingsPage from "./pages/SettingsPage";
import {LuciferIcon} from "./models/Icons";
import ReactModal from "react-modal";
import DialogContext, {DialogContextProvider, makeDialog} from "./contexts/DialogContext";

const routeObj: HookRouter.RouteObject = {
  "/": () => (
    <Page>
      <h1>&nbsp;</h1>
      <h1>Enheter</h1>
    </Page>
  ),
  "/devices": () => (
    <div>
      <IconElement icon={LuciferIcon.Hexagon} caption="Grønn" color={{h: 125, s: 0.5}}/>
      <IconElement icon={LuciferIcon.Square} caption="Kelvin 1k" color={{kelvin: 1000}}/>
      <IconElement icon={LuciferIcon.Bulb} caption="Kelvin 2k" color={{kelvin: 2000}}/>
      <IconElement icon={LuciferIcon.BulbGroup} caption="Kelvin 3k" color={{kelvin: 3000}}/>
      <IconElement icon={LuciferIcon.Bridge} caption="Kelvin 4k" color={{kelvin: 4000}}/>
      <IconElement icon={LuciferIcon.Cog} caption="Kelvin 5k" color={{kelvin: 5000}}/>
      <IconElement icon={LuciferIcon.Switch} caption="Kelvin 6k" color={{kelvin: 6000}}/>
      <IconElement icon={LuciferIcon.Triangle} caption="Kelvin 7k" color={{kelvin: 7000}}/>
      <IconElement icon={LuciferIcon.HexagonGroup} caption="Kelvin 8k" color={{kelvin: 8000}}/>
      <IconElement icon={LuciferIcon.Router} caption="Kelvin 9k" color={{kelvin: 9000}}/>
      <IconElement icon={LuciferIcon.Check} caption="Kelvin 10k" color={{kelvin: 10000}}/>
      <IconElement icon={LuciferIcon.Cross} caption="Kelvin 10k" color={{kelvin: 10000}}/>
      <IconElement caption="Mer" color="hs-gradient"/>
      <IconElement caption="Mer" color="k-gradient"/>
    </div>
  ),
  "/settings": () => <SettingsPage/>,
}

const routeList = ["/", "/devices", "/settings"];

const tabNames = ["Lucifer", "Enheter", "Oppsett"];

function App() {
  return (
    <DialogContextProvider>
      <AppInContext/>
    </DialogContextProvider>
  );
}

function AppInContext() {
  const route = useRoutes(routeObj);
  const path = usePath();
  const {dialog} = useContext(DialogContext);

  useLayoutEffect(() => {
    ReactModal.setAppElement("#root");
  }, []);

  return (
    <div className="App">
      <Tabs tabNames={tabNames}
            index={routeList.indexOf(path)}
            onChange={i => navigate(routeList[i])}
            large boldIndex={0}
      />
      {route || <Page>404</Page>}
      {makeDialog(dialog)}
    </div>
  );
}

export default App;