import React, { useEffect } from "react";
import { HashRouter as Router, Routes, Route } from "react-router-dom";
import { useDispatch } from "react-redux";

import getDatabase from "./local_storage/rxdb";
import { APP_SETTINGS } from "./local_storage/schemas";
import { setSettings } from "./local_storage/rxdbSlice";

import { setBackendDispatch } from "../apis/cache";
import { cacheDataUrl } from "../apis/cacheSlice";
import LinksPage from "../features/tools/links/LinksPage";
import UtilitiesPage from "../features/tools/utilities/UtilitiesPage";
import Taskbar from "./Taskbar";
import HelpdeskPage from "../features/support/support_page/Helpdesk";
import HelpdeskOverlayPage from "../features/support/overlay_page/HelpdeskOverlay";
import InformingPage from "../features/informing/InformingPage";

export default function App() {
  const dispatch = useDispatch();

  // read settings with attachments from local database and save in state on startup
  useEffect(() => {
    setBackendDispatch(dispatch); // give access to backendApi for caching in store with dispatch
    getDatabase()
      .then(async (db) => {
        const settingsDocument = await db.settings.findOne(APP_SETTINGS).exec();
        if (settingsDocument) {
          dispatch(setSettings(settingsDocument.toJSON()));
          const attachments = await db.attachments.find().exec();
          attachments?.forEach((attachment) => {
            dispatch(
              cacheDataUrl({
                name: attachment.get("name"),
                dataURL: attachment.get("base64data"),
              })
            );
          });
        }
        return true;
      })
      .catch((error) => alert(error));
  }, [dispatch]);

  return (
    <Router>
      <Routes>
        <Route path="/" element={<Taskbar />} />
        <Route path="compact" element={<Taskbar compact />} />
        <Route path="links" element={<LinksPage />} />
        <Route path="utilities" element={<UtilitiesPage />} />
        <Route path="helpdesk" element={<HelpdeskPage />} />
        <Route path="helpdesk-overlay" element={<HelpdeskOverlayPage />} />
        <Route path="informing" element={<InformingPage />} />
      </Routes>
    </Router>
  );
}