import React, { useEffect, useReducer, useState } from "react";
import { useNavigate, Route, Routes } from "react-router-dom";

import { initTempSubjects } from "../utils/Test";
import { dataForage, subForage } from "../utils/LocalForage";

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

export const CalendarStateContext = React.createContext();

const render = (subsObj, args) => {
  switch (args.type) {
    case "CHECKED":
      const sub = subsObj[args.code];
      sub.selected = !sub.selected;
      subForage.setItem(args.code, sub);
      return { ...subsObj, [args.code]: sub };
    case "INIT":
      return args.subsObj;
    default:
      return subsObj;
  }
};

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

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

  const navigate = useNavigate();
  useEffect(() => {
    async function onMount() {
      if (!(await dataForage.getItem("session"))) return navigate("/login");

      if (!(await dataForage.getItem("Subjects"))) await initTempSubjects();
      let tsubsObj = {};
      for (const code of await dataForage.getItem("Subjects")) {
        tsubsObj[code] = await subForage.getItem(code);
      }
      dispatch({ type: "INIT", subsObj: tsubsObj });
    }
    onMount();
  }, [navigate]);

  return (
    <CalendarStateContext.Provider
      value={{ state, setState, subsObj, dispatch }}
    >
      <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>
    </CalendarStateContext.Provider>
  );
};

export default Calendar;