/* eslint-disable react/no-unused-prop-types */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import dayjs from "dayjs";

export interface TimePickerProps {
  startTime: string;
  endTime: string;
  rangeMinute: number;
  placeholder: string;
  onChange: (time: string) => void;
  errorMessages?: string;
  value: string | undefined;
}

const TimePicker = (props: TimePickerProps) => {
  function getTimeItems() {
    const startTimeDayjs = dayjs(`2020-01-01${props.startTime}`, "HH:mm");
    const endTimeDayjs = dayjs(`2020-01-01${props.endTime}`, "HH:mm");
    const timeItems = [];
    let time = startTimeDayjs;
    while (!time.isAfter(endTimeDayjs)) {
      timeItems.push(time.format("HH:mm"));
      time = time.add(props.rangeMinute, "minute");
    }
    return timeItems;
  }

  const timeItems = getTimeItems();

  return (
    <div>
      {timeItems.map((time) => (
        <div
          className="cursor-pointer p-3"
          key={time}
          onClick={() => props.onChange(time)}
        >
          {time}
        </div>
      ))}
    </div>
  );
};

export default TimePicker;