import { useEffect, useState } from "react";
import { Moment } from "moment";
import "moment/locale/ru";
import "./timepicker.css";
import "../calendarDesktop/calendar.css";
import point0 from "../calendar/Ellipse0.svg";
import point1 from "../calendar/Ellipse1.svg";
import { TProps } from "../calendarDesktop/calendarDesktop";
import { useSwiper } from 'swiper/react';



export const Timepicker: React.FC<TProps> = ({
  time,
  onUpdate,
  open,
  setOpen,
  isMobile,
  text
}) => {


  const [timePicker, settimePicker] = useState<any[]>([]);
  const [date, setDate] = useState('')
  const startTime = time.clone().hours(8).minutes(0);
  const endTime = time.clone().hours(19).minutes(0);
  const swiper = useSwiper();

  useEffect(() => {
    const temp = startTime.clone().subtract("30", "minute");
    const a: any = [];
    while (temp.isBefore(endTime, "minute")) {
      a.push(
        Array(8)
          .fill(0)
          .map(() => temp.add(30, "minutes").clone())
      );
    }
    setDate(time.format("DD MMMM"))
    settimePicker(a);
  }, [time]);

  function updateTime(time: Moment) {
    if (isMobile) {
      onUpdate(time);
      setOpen({
        calendar: false,
        timePicker: false,
        form: true,
        confirm: false,
      });
      swiper.slideNext()
    } else {
      setOpen({
        calendar: false,
        timePicker: false,
        form: true,
        confirm: false,
      });
      onUpdate(time);
    }

  }

  function goBack() {
    if (isMobile) {
      swiper.slidePrev()
    }
    setOpen({
      calendar: true,
      timePicker: false,
      form: false,
      confirm: false,
    });
  }


  function isActive(i: number) {
    if (i % 2 === 0) {
      return 'timpicker__cell_active timpicker__cell'
    }
    else {
      return 'timpicker__cell'
    }
  }

  return (
    <div data-aos="fade-up" className={open.timePicker ? " calendar  aos-init aos-animate" : "calendar aos-init aos-animate"}>
      <div className={open.timePicker ? 'opacity_active' : 'opacity'}>
        <div className="timepicker__header">
          <div className="caption__container">
            <div onClick={() => goBack()} className="button__arrow_back" ></div>
            <span className="calendar__caption">{text.timepickerCaption}</span>
          </div>
          <div className="line line_time"></div>
          <div className="date date_time">{!open.calendar ? time.format("DD MMMM") : '' }</div>
        </div>
        <div className="form__block">
          {timePicker.map((date, i) => (
            <div key={i} className="timepicker__table">
              {date.map((time: any, i: number) => (
                <div
                  key={i}
                  onClick={() => updateTime(time)}
                  className={isActive(i)}
                >
                  {time.format("HH:mm")}
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
      <div className="appointment__block appointment__block_time">
        <div>
          <img alt="point" className="point" src={point1}></img>
          <span className="appointment__caption_active">{text.appointmentTrue}</span>
        </div>
        <div>
          <img alt="point" className="point" src={point0}></img>
          <span>{text.appointmentFalse}</span>
        </div>
      </div>

    </div>
  );
};

export default Timepicker;
