import { CalendarStateContext } from "../pages/Calendar";
import { moveDate, toSunday } from "../utils/Dates";

import React, { useContext } from "react";
import GridItem from "./GridItem.js";

const Grid = () => {
  const { state } = useContext(CalendarStateContext);

  const renderRows = () => {
    const rows = [];
    const ndate = new Date(state.date);
    ndate.setDate(1);
    toSunday(ndate);

    for (let i = 0; i < 35; i++) {
      rows.push(<GridItem key={i} targetDate={new Date(ndate)} />);
      moveDate(ndate, "day", 1);
    }

    return rows;
  };

  return <div className="Grid">{renderRows()}</div>;
};

export default Grid;