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

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

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 params = { userID, date: toYMDStr(targetDate, "-") };
      const { data: scdate } = await axios.get(
        "http://localhost:3001/db/schedules_date",
        {
          params,
        }
      );
      const { data: sctime } = await axios.get(
        "http://localhost:3001/db/schedules_time",
        {
          params,
        }
      );
      setSchedules(scdate.concat(sctime));
    }
    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;