import React, { useState } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "./styles.css";

import Login from "./components/login/Login";
import Home from "./components/home/Home";
import Contacts from "./components/contacts/Contacts";
import Calendar from "./components/calendar/Calendar";
import Navbar from "./components/navbar/Navbar";
import { ThemeProvider } from "@emotion/react";
import ProtectedRoute from "./ProtectedRoute";

import Theme from "./Theme";

import "./style/App.css";
import Sidebar from "./components/sidebar/Sidebar";
import {
  MeetingStatus,
  SidebarUserObj,
} from "./components/sidebar/SidebarUser";
import MeetingDetails from "./components/meeting-details/MeetingDetails";
import { Box } from "@mui/material";

const App: React.FC = () => {
  const [meetingInfoOpen, setMeetingInfoOpen] = useState(false);

  /* Temporary data */
  const [sidebarUsers] = useState<SidebarUserObj[]>([
    { id: 0, name: "Jincheng L.", meetingStatus: MeetingStatus.ONLINE },
    { id: 1, name: "Matt B.", meetingStatus: MeetingStatus.IN_MEETING },
    { id: 2, name: "Taehee C.", meetingStatus: MeetingStatus.OFFLINE },
    { id: 3, name: "Bob A.", meetingStatus: MeetingStatus.AWAY },
    { id: 4, name: "Bob B.", meetingStatus: MeetingStatus.IN_MEETING },
    { id: 5, name: "Bob C.", meetingStatus: MeetingStatus.OFFLINE },
    { id: 6, name: "Bob D.", meetingStatus: MeetingStatus.ONLINE },
    { id: 7, name: "Bob E.", meetingStatus: MeetingStatus.AWAY },
    { id: 8, name: "Bob F.", meetingStatus: MeetingStatus.OFFLINE },
    { id: 9, name: "Bob G.", meetingStatus: MeetingStatus.ONLINE },
    { id: 10, name: "Bob H.", meetingStatus: MeetingStatus.AWAY },
    { id: 11, name: "Bob I.", meetingStatus: MeetingStatus.OFFLINE },
    { id: 12, name: "Bob J.", meetingStatus: MeetingStatus.AWAY },
    { id: 13, name: "Bob K.", meetingStatus: MeetingStatus.IN_MEETING },
    { id: 14, name: "Bob L.", meetingStatus: MeetingStatus.IN_MEETING },
    { id: 15, name: "Bob M.", meetingStatus: MeetingStatus.OFFLINE },
    { id: 16, name: "Bob N.", meetingStatus: MeetingStatus.OFFLINE },
    { id: 17, name: "Bob O.", meetingStatus: MeetingStatus.AWAY },
    { id: 18, name: "Bob P.", meetingStatus: MeetingStatus.AWAY },
    { id: 19, name: "Bob Q.", meetingStatus: MeetingStatus.ONLINE },
    { id: 20, name: "Bob R.", meetingStatus: MeetingStatus.ONLINE },
  ]);

  return (
    <ThemeProvider theme={Theme}>
      <Router>
        <Navbar />
        <Box id="drawer-container" sx={{ display: "flex", height: "100%" }}>
          <Box sx={{ flexGrow: 1 }}>
            <Routes>
              <Route path="/login" element={<Login />} />
              <Route element={<ProtectedRoute />}>
                <Route path="/" element={<Home />} />
                <Route
                  path="/contacts"
                  element={<Contacts setMeetingInfoOpen={setMeetingInfoOpen} />}
                />
                <Route path="/calendar" element={<Calendar />} />
              </Route>
            </Routes>
          </Box>
          <Box>
            <Sidebar users={sidebarUsers} />
          </Box>
        </Box>
        <MeetingDetails open={meetingInfoOpen} setOpen={setMeetingInfoOpen} />
      </Router>
    </ThemeProvider>
  );
};

export default App;