import "../styles/Grid.css";
import GridHead from "./GridHead.js";
import GridRow from "./GridRow.js";

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

const Grid = () => {
  const [state] = useContext(CalendarStateContext);

  const renderRows = () => {
    const rows = [];
    const ndate = new Date(state.year, state.month - 1, 1);
    toSunday(ndate);

    for (let i = 0; i < 5; i++) {
      rows.push(<GridRow key={i} startDate={toYMD(ndate)} />);
      moveDate(ndate, "week", 1);
    }

    return rows;
  };

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

export default Grid;