import { useContext } from "react";
import { CalendarStateContext } from "../pages/Calendar";
import { toYMD } from "../utils/Dates";
import ScheduleItem from "./ScheduleItem";

const GridItem = ({ targetDate }) => {
  const { state } = useContext(CalendarStateContext);
  const { month } = toYMD(state.date);
  const { month: tmonth, date: tdate } = toYMD(targetDate);

  const tempSchedules = [
    { type: "zoom", category: "오픈소스", label: "", start: [9, 30] },
    { type: "ecampus", category: "논리회로", label: "요약", end: [23, 59] },
  ];
  const renderScheduleItems = () => {
    if (targetDate.getDay() === 5)
      return (
        <>
          <ScheduleItem schedule={tempSchedules[0]}></ScheduleItem>
          <ScheduleItem schedule={tempSchedules[1]}></ScheduleItem>
        </>
      );
  };

  return (
    <div className="GridItem" relative={tmonth - month || null}>
      <span className="date">
        {month !== tmonth ? tmonth + "/" + tdate : tdate}
      </span>
      {renderScheduleItems()}
    </div>
  );
};

export default GridItem;