import { useEffect } from "react";
import { months } from "./Calendar";

const DateDetails = (props) => {
  const allTimes = [
    [800, 830, 900, 930],
    [1000, 1030, 1100, 1130],
    [1200, 1230, 1300, 1330],
    [1400, 1430, 1500, 1530],
    [1600, 1630],
  ];

  useEffect(() => {
    //remove previously set times
    const prevSelectedTimes = document.getElementsByClassName("time-filled");
    [...prevSelectedTimes].forEach((item) => {
      item.className = "time-empty";
    });
    //set filled times
    for (const apt of props.apptsForDate) {
      document.getElementById(apt.time).className = "time-filled";
    }
  }, [props]);

  return (
    <div className="details-container">
      <p className="section-paragraph">
        {months[props.date.month] + " "}
        {props.date.day + ", "}
        {props.date.year}
      </p>
      <div className="generic-column-20px">
        {allTimes.map((timeSet) => (
          <div key={timeSet} className="generic-row-20px">
            {timeSet.map((time) => (
              <div
                key={time}
                id={time}
                className="time-empty"
                onClick={() => props.onSelectTime(time)}
              >
                <p className="section-paragraph">{time}</p>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
};
export default DateDetails;