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

export const Calendar: React.FC<TProps> = ({ open, setOpen, time, onUpdate, isMobile, locale, text }) => {
    const swiper = useSwiper();
    const [calendar, setCalendar] = useState<any[]>([]);
    const [value, setValue] = useState(time);
    const currDate = moment()
    const startDay = value.clone().startOf("month").startOf("week");
    const endDay = value.clone().endOf("month").endOf("week");
    const weekDays = getWeekDays()

    function getWeekDays() {
        if (locale === 'RU') {
            return ["пн", "вт", "ср", "чт", "пт", "сб", "вс"];
        } else {
            return ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
    }

    useEffect(() => {
        setValue(time.locale(locale as string))
      }, [locale])
    

    useEffect(() => {
        const day = startDay.clone().subtract("1", "day");
        const a: any = [];
        while (day.isBefore(endDay, "day")) {
            a.push(
                Array(7)
                    .fill(0)
                    .map(() => day.add(1, "day").clone())
            );
        }
        setCalendar(a);
    }, [value]);


    function hide(day: object, i: number) {
        if (value.isSame(day, "month")) {
            if (currDate.isSameOrBefore(day, "day") && i !== 5 && i !== 6) {
                const cellClass = "calendar__cell_active calendar__cell";
                return cellClass;
            }
            return "calendar__cell";
        } else {
            return "calendar__cell_none";
        }
    }

    function prevMonth() {
        return value.clone().subtract(1, "month");
    }

    function nextMonth() {
        return value.clone().add(1, "month").startOf("month");
    }

    function thisMonth() {
        return value.isSame(new Date(), "month");
    }

    function updateDay(day: Moment) {
        const temp = currDate.clone().subtract(1, "day");
        if (day.isBefore(temp)) {
            return;
        } else {
            if (isMobile) {
                swiper.slideNext()
            } else {
            }
            setOpen({
                calendar: false,
                timePicker: true,
                form: false,
                confirm: false,
            });
            onUpdate(day);
        }
    }


    return (<div data-aos="fade-up"  className='calendar'>
        <div className={open.calendar ? 'opacity_active' : 'opacity'}>
            <div className="calendar__header">
                <span className="calendar__caption calendar__caption_calendar">
                    {text.calendarCaption}
                </span>
                <div className="line"></div>
            </div>
            <div className="form__block">
                <div className="date__container">
                    <div
                        className="button__chevron_l"
                        onClick={() => !thisMonth() && setValue(prevMonth())}
                    ></div>
                    <span className="date">
                        {value.format("MMMM")}, {value.format("YYYY")}
                    </span>
                    <div
                        className="button__chevron_r"
                        onClick={() => setValue(nextMonth())}
                    ></div>
                </div>
                <div className="calendar__table">
                    {weekDays.map((day, i) => (
                        <div key={i} className="weekday__cell">
                            {day}
                        </div>
                    ))}
                </div>
                {calendar.map((week, i) => (
                    <div key={i} className="calendar__table">
                        {week.map((day: any, i: number) => (
                            <div
                                key={i}
                                onClick={() => updateDay(day)
                                }
                                className={hide(day, i)}
                            >
                                {day.format("D")}
                            </div>
                        ))}
                    </div>
                ))}
            </div>
        </div>
        <div className="appointment__block">
            <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 className="appointment__caption" >{text.appointmentFalse}</span>
            </div>
        </div>
    </div>)
}