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

import Month from "../components/Month";
import Header from "../components/Header";
import Side from "../components/Side";
import Subject from "../utils/Subject";

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(),
  });

  if (!localStorage.getItem("Subjects")) {
    let tsubs = [];
    let tcolors = [
      "red",
      "green",
      "blue",
      "orange",
      "gold",
      "aqua",
      "chartreuse",
    ];
    for (let i = 0; i < 7; i++) {
      tsubs.push(new Subject("과목" + (i + 1), tcolors[i], true));
    }
    localStorage.setItem("Subjects", JSON.stringify(tsubs));
  }
  const [subs, setSubs] = useState(
    JSON.parse(localStorage.getItem("Subjects"))
  );

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

export default Calendar;