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

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

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

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() {
      setSchedules(await scheForage.getItem(toYMDStr(targetDate)));
    }
    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;