import React, {ReactNode, useEffect, useRef, useState} from 'react';
import dayjs, {Dayjs} from "dayjs";
import locale from "dayjs/locale/el";
import './calendar.scss'
import './calendar-month.scss'
import EventsPopup from "./EventsPopup";
import {normaliseGreek} from "../../../helpers/functions";
import CalendarDay from "./CalendarDay";
import next from '../../../assets/images/toggle-open.png'
import {getCalendarVisits} from "../../../API/dpass";

/*
per month with jan == 0
 */

type CalendarMonthProps = {
    month: Dayjs
    showExtra?: boolean
    hasControl?: boolean
    prevMonth?: () => void
    nextMonth?: () => void
    getEvents?: (p: any) => any
}

/**
 * return the first day of calendar month in japan string format YYYY-MM-DD
 *
 * @param month
 */
const firstDayOfMonth = (month: Dayjs[][]): string => {
    return month[0][0].format('YYYY-MM-DD')
}

/**
 * return the first day of calendar month in japan string format YYYY-MM-DD
 *
 * @param month
 */
const lastDayOfMonth = (month: Dayjs[][]): string => {
    return month[month.length - 1][month.length - 1].format('YYYY-MM-DD')
}

const CalendarMonth = ({
                           month,
                           showExtra = true,
                           hasControl = false,
                           prevMonth,
                           nextMonth,
                           getEvents
                       }: CalendarMonthProps) => {


    const now = dayjs().locale({
        ...locale,
    });

    const [arrayOfDays, setArrayOfDays] = useState<Dayjs[][]>([]);
    const [selectedDay, setSelectedDay] = useState('')
    const [events, setEvents] = useState({})

    /**
     * check if day is in current month
     */
    function isInMonth(day: Dayjs) {
        return day.month() === month.month()

    }

    useEffect(() => {

        if (arrayOfDays.length > 0) {

            (async () => {
                try {
                    const res = await getCalendarVisits({
                        date_from: firstDayOfMonth(arrayOfDays),
                        date_to: lastDayOfMonth(arrayOfDays)
                    })
                    setEvents(res.data)
                } catch (e) {

                }
            })();

        }
        return ()=>{
            setEvents({})
        }


    }, [arrayOfDays])

    const getAllDays = () => {
        let currentDate = month.startOf("month").day(0);
        const nextMonth = month.add(1, "month").month();
        let allDates = [];
        let weekDates = [];
        let weekCounter = 1;
        while (currentDate.day(0).month() !== nextMonth) {
            // @ts-ignore
            // @ts-ignore
            const calendarDay = {
                month: currentDate.month(),
                date: currentDate.date(),
            }
            weekDates.push(currentDate);
            if (weekCounter === 7) {
                allDates.push(weekDates);
                weekDates = [];
                weekCounter = 0;
            }
            weekCounter++;
            currentDate = currentDate.add(1, "day");
        }

        setArrayOfDays(allDates);
    };


    useEffect(() => {
        getAllDays()
    }, [month])

    // @ts-ignore
    return (

        <div className="calendar-month">

            <div className="d-flex justify-content-center calendar-head">
                {
                    hasControl &&
                    <>

                        <img src={next} className="prev" onClick={() => {
                            prevMonth && prevMonth();
                            setSelectedDay('')
                        }} height={16} width={11}/>
                        <img src={next} className="next" onClick={() => {
                            nextMonth && nextMonth();
                            setSelectedDay('')
                        }} height={16} width={11}/>

                    </>
                }
                <div className={'month'}>{normaliseGreek(month.format('MMMM YY'))}</div>
            </div>

            <table className='calendar-body'>
                <thead>
                <tr>
                    {
                        new Array(7).fill(null).map((_, i) =>
                            <th className={'calendar-day-name'}
                                key={now.day(i).format('d')}>{now.day(i).format('ddd')}</th>
                        )
                    }
                </tr>
                </thead>

                <tbody>
                {
                    arrayOfDays && arrayOfDays.map((week: any, i: number) => {

                        return (
                            <tr key={'week' + i}>
                                {
                                    week.map((day: any) => {


                                        const dayString = day.format('YYYY-MM-DD')

                                        /**
                                         * construct classes for day cell
                                         */
                                        const inMonth = isInMonth(day)

                                        const hasEvent = (inMonth || !inMonth && showExtra) && (dayString in events)

                                        const today = day.isSame(now, 'day')

                                        return (
                                            <CalendarDay
                                                key={dayString}
                                                day={day}
                                                hasEvent={hasEvent}
                                                isToday={today}
                                                isInMonth={inMonth}
                                                onClick={() => setSelectedDay(hasEvent ? dayString : '')}
                                                // @ts-ignore
                                                // events={hasEvent && days_with_events[dayString]}
                                            />
                                        )
                                    })
                                }
                            </tr>
                        )
                    })
                }

                </tbody>
            </table>
            {
                selectedDay &&
                <ul className={'events'}>
                    {
                        // @ts-ignore
                        events[selectedDay].map((ev: any) => {
                            return (
                                <li  key={ev.id} className={'event'}>
                                    <h4>{ev.visitor_name}</h4>
                                    <p>
                                        <span> {ev.invitation_title} </span>
                                        <span> {ev.visit_time_from} - </span>
                                        <span> {ev.visit_time_to}</span>
                                    </p>
                                </li>)
                        })}
                </ul>
            }
        </div>


    );
}

export default CalendarMonth;