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

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

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 Row = () => {
  const { state } = useContext(CalendarStateContext);

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

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

    return items;
  };

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

const Week = () => {
  return (
    <div className="Week">
      <GridHead />
      <Row />
    </div>
  );
};

export default Week;