import React, { useState } from "react";
import { Navigate, Route, Routes } from "react-router-dom";

import Grid from "../components/Grid";
import Header from "../components/Header";
import "../styles/Home.css";

export const CalendarStateContext = React.createContext();

const Calendar = () => {
  console.log("visit Calendar");

  const session = localStorage.getItem("session");

  const [state, setState] = useState({
    scope: "month",
    date: new Date(),
  });

  return (
    <CalendarStateContext.Provider value={[state, setState]}>
      {session ? (
        <div className="Calendar">
          <Header />
          <Routes>
            <Route path="/month/*" element={<Grid />} />
            <Route path="/week/*" element={<></>} />
            <Route path="/day/*" element={<></>} />
          </Routes>
        </div>
      ) : (
        <Navigate to="/login" />
      )}
    </CalendarStateContext.Provider>
  );
};

export default Calendar;