import { useContext, useEffect, useState } from "react";
import localforage from "localforage";

import { toYMD, toYMDStr } from "../utils/Dates";
import { scheForage } from "../utils/LocalForage";

import { CalendarStateContext } from "../pages/Calendar";
import ScheduleItem from "./ScheduleItem";
import axios from "axios";

const GridItem = ({ targetDate }) => {
  const { state } = useContext(CalendarStateContext);
  const { month: calMonth } = toYMD(state.date);
  const { month, date } = toYMD(targetDate);
  const [schedules, setSchedules] = useState();

  useEffect(() => {
    async function loadScheduleItems() {
      const userID = await localforage.getItem("userID");
      const res = await axios.get("http://localhost:3001/db/schedules_date", {
        params: {
          userID,
          date: toYMDStr(targetDate, "-"),
        },
      });
      setSchedules(res.data);
    }
    loadScheduleItems();
  }, [targetDate]);

  return (
    <div className="GridItem" relative={month - calMonth || null}>
      <span className="date">
        {calMonth !== month ? month + "/" + date : date}
      </span>
      {schedules &&
        schedules.map((sche, index) => (
          <ScheduleItem key={index} schedule={sche} />
        ))}
    </div>
  );
};

export default GridItem;