import React, {useState, useEffect } from 'react';
import { useAtom } from 'jotai';
import HomePage from './components/pages/HomePage';
import Locations from './components/pages/Locations';
import RoomsPage from './components/pages/RoomsPage';
import { Routes, Route, useNavigate } from "react-router-dom";
import { Modal, Button, Text, Group, TextInput, Loader, AppShell } from '@mantine/core';
import { useDebouncedValue, useLocalStorageValue } from '@mantine/hooks';
import { useNotifications } from '@mantine/notifications';

import { backendAPI, defaultURLS } from './services/backend-api';

import { serverConfigAtom } from './state/main'


import SideBar from './components/SideBar';
import AppHeader from './components/AppHeader';



function App() {
  // Main nav/sidebar appshell openend
  const [shellOpened, setShellOpened] = useState(false)
  const [isLoading, setIsLoading] = useState(true)

  const [, setServerConfig] = useAtom(serverConfigAtom)

  const notifications = useNotifications();
  const navigate = useNavigate();



  useEffect(() => {
    // navigate("/")// Reset to homepage on new load anywhere in the app
    setIsLoading(true)
    async function fetchSettings() {
      backendAPI.get('/config').then(results => {
        // console.log("FULL RESULTS: ", results.config.baseURL)
        results.data.baseURL = defaultURLS.baseURL
        console.log("CONFIG: ", results.data)
        setServerConfig(results.data)
        notifications.showNotification({
          title: 'Backend Notice',
          message: 'Config fetched from backend!',
          color: "green"
        })
        setIsLoading(false)
      }).catch(err => {
        notifications.showNotification({
          title: 'Backend Notice',
          message: `Failed to connect to backend! ${err}`,
          autoClose: false,
          color: "red",
        })
        setIsLoading(false)
      })

    }
    fetchSettings();


  }, [])

  // function showPage() {
  //   switch (currentPage.path) {
  //     case "home":
  //       return <HomePage />
  //     case "locations":
  //       console.log("RETURNING LOCATIONS: ", currentPage)
  //       return <Locations setCurrentPage={setCurrentPage} id={currentPage.id}/>
  //     case "rooms":
  //       console.log("RETURNING ROOMS: ", currentPage)
  //       return <RoomsPage setCurrentPage={setCurrentPage} id={currentPage.id} />
  //     default:
  //       break;
  //   }
  // }


  return (
        <AppShell
            navbarOffsetBreakpoint="sm" // navbarOffsetBreakpoint controls when navbar should no longer be offset with padding-left
            fixed       // fixed prop on AppShell will be automatically added to Header and Navbar
            navbar={<SideBar opened={shellOpened} />}
            header={<AppHeader opened={shellOpened} setOpened={setShellOpened}/>}
          >
            <Routes>
              <Route path="/" element={<HomePage />} />
              <Route path="locations" element={<Locations />} />
              <Route path="rooms" element={<RoomsPage />} />
              
            </Routes>
        </AppShell>
  );
}

export default App;
