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

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

const GridHead = () => {
  const days = ["일", "월", "화", "수", "목", "금", "토"];
  const renderItems = () => {
    const items = [];
    for (let i = 0; i < 7; i++) {
      items.push(
        <div className="GridHeadItem" key={i}>
          {days[i]}
        </div>
      );
    }
    return items;
  };

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

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

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

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

    return items;
  };

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

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

export default Month;