import React, { useState, useRef, useEffect, useMemo, useImperativeHandle } from 'react';

import { getTodayDate, getCalendarDate, isValidDate, padZero  } from 'funda-utils/dist/cjs/date';
import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
import ModalDialog from 'funda-modaldialog';



export interface EventsValueConfig {
    id: string | number;
    date: string,
    time: string,
    data: string,
    eventStyles?: React.CSSProperties;
    callback?: () => void;
}

export interface TimelineCellListConfig {
    date: string;
    list: EventsValueConfig[];
}

export type EventCalendarProps = {
    contentRef?: React.ForwardedRef<any>;
    calendarWrapperClassName?: string;
    customTodayDate?: string;
    eventsValue?: any[];
    langWeek?: string[];
    langWeekFull?: string[];
    langMonths?: string[];
    langMonthsFull?: string[];
    langToday?: string;
    iconRemove?: React.ReactNode | string;
    iconAdd?: React.ReactNode | string;
    cellCloseBtnClassName?: string;
    cellCloseBtnLabel?: string | React.ReactNode;
    cellAddBtnClassName?: string;
    cellAddBtnLabel?: string | React.ReactNode;
    onChangeDate?: (e: any, currentData: any) => void;
    onChangeMonth?: (currentData: any) => void;
    onChangeYear?: (currentData: any) => void;
    onChangeToday?: (currentData: any) => void;
    onListRenderComplete?: () => void;

    // modal dialog
    modalMaskOpacity?: string;
    modalMaxWidth?: number | string;
    modalMinHeight?: number | string;
    modalHeading?: React.ReactNode;
    modalContent?: React.ReactNode;
    modalDeleteContent?: React.ReactNode;
    modalCloseBtnClassName?: string;
    modalCloseBtnLabel?: string | React.ReactNode;
    modalSubmitBtnClassName?: string;
    modalSubmitBtnLabel?: string | React.ReactNode;
    modalSubmitDeleteBtnClassName?: string;
    modalSubmitDeleteBtnLabel?: string | React.ReactNode;
    onModalEditOpen?: (currentData: any, openwin: any, type: 'normal' | 'new') => void;
    onModalEditClose?: (currentData: any) => void;
    onModalDeleteOpen?: (currentData: any, openwin: any) => void;
    onModalDeleteClose?: (currentData: any) => void;
    onModalEditEvent?: (currentData: any, closewin: any) => void;
    onModalDeleteEvent?: (currentData: any, closewin: any) => void;
    //
    onCellMouseEnter?: (el: any) => void;
    onCellMouseLeave?: (el: any) => void;
    onCellClick?: (el: any) => void;
    onCellDoubleClick?: (el: any) => void;
    onCellMouseUp?: (el: any) => void;
    onKeyPressed?: (el: any) => void;

}


const EventCalendar = (props: EventCalendarProps) => {
    const {
        contentRef,
        calendarWrapperClassName,
        customTodayDate,
        eventsValue,
        langWeek,
        langWeekFull,
        langMonths,
        langMonthsFull,
        langToday,
        onChangeDate,
        onChangeMonth,
        onChangeYear,
        onChangeToday,
        onListRenderComplete,

        //
        iconRemove,
        iconAdd,
        cellCloseBtnClassName,
        cellCloseBtnLabel,
        cellAddBtnClassName,
        cellAddBtnLabel,

        //
        modalMaskOpacity,
        modalMaxWidth,
        modalMinHeight,
        modalHeading,
        modalContent,
        modalDeleteContent,
        modalCloseBtnClassName,
        modalCloseBtnLabel,
        modalSubmitBtnClassName,
        modalSubmitBtnLabel,
        modalSubmitDeleteBtnClassName,
        modalSubmitDeleteBtnLabel,
        onModalEditOpen,
        onModalEditClose,
        onModalDeleteOpen,
        onModalDeleteClose,
        onModalEditEvent,
        onModalDeleteEvent,

        //
        onCellMouseEnter,
        onCellMouseLeave,
        onCellClick,
        onCellDoubleClick,
        onCellMouseUp,
        onKeyPressed
    } = props;

    const DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    const DAYS_LEAP = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    const WEEK = langWeek || ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];
    const WEEK_FULL = langWeekFull || ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY'];
    const MONTHS = langMonths || ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
    const MONTHS_FULL = langMonthsFull || ['January', 'Febuary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    const START_WEEK_ON = 1; // represents "Monday/1" in JavaScript
    
    // orginal data
    const [orginalData, setOrginalData] = useState<TimelineCellListConfig[]>([]);

    const now = useMemo(() => new Date(), []);
    const [date, setDate] = useState<Date>(now);
    const [day, setDay] = useState<number>(date.getDate());
    const [month, setMonth] = useState<number>(date.getMonth());
    const [year, setYear] = useState<number>(date.getFullYear());
    const [startDay, setStartDay] = useState<number>(getStartDayOfMonth(date));


    // selection tab
    // gets the today date time object
    const [selectedMonth, setSelectedMonth] = useState<number>(now.getMonth());
    const [selectedYear, setSelectedYear] = useState<number>(now.getFullYear());
    const [yearsArray, setYearsCollection] = useState<number[]>([]);

    //
    const [winYear, setWinYear] = useState<boolean>(false);
    const [winMonth, setWinMonth] = useState<boolean>(false);

    // modal dialog
    const modalEditHandleRef = useRef<any>();
    const modalDeleteHandleRef = useRef<any>();
    const EVENTS_ENABLED = typeof modalContent !== 'undefined';
    const EVENTS_DELETE_ENABLED = typeof modalDeleteContent !== 'undefined';
    const [showEdit, setShowEdit] = useState<boolean>(false);
    const [showDelete, setShowDelete] = useState<boolean>(false);

    // Open temporary storage for pop-ups
    const [tableCellId, setTableCellId] = useState<number>(-1);


    const findMondayAndTruncate = (dates: string[]) => {
        const _res = dates.map((s: string) => new Date(s));
        // Find the first Monday in the sequence
        for (let i = 0; i < _res.length; i++) {
            const date = _res[i];
            if (date.getDay() === START_WEEK_ON) { 
                // Return dates starting from Monday onwards
                return dates.slice(i);
            }
        }

        return [];  // Return empty array if no Monday found
    }



    // exposes the following methods
    useImperativeHandle(
        contentRef,
        () => ({
            today: () => {
                handleTodayChange();
            },
            next: () => {
                handleNextChange();
            },
            prev: () => {
                handlePrevChange();
            },
            closeModal: () => {
                if (modalEditHandleRef.current) modalEditHandleRef.current.close();
                if (modalDeleteHandleRef.current) modalDeleteHandleRef.current.close();
            }
        }),
        [contentRef],
    );


    // helper buttons
    const _delBtn = () => <>
        {iconRemove ? <>{iconRemove}</> : <><svg width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path fillRule="evenodd" clipRule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10ZM8 11a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Z" fill="#000" /></svg></>}
        {cellCloseBtnLabel || ''}
    </>;

    const _addBtn = () => <>
        {iconAdd ? <>{iconAdd}</> : <><svg width="20px" height="20px" viewBox="0 0 32 32"><g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd"><g transform="translate(-102.000000, -1037.000000)" fill="#000000"><path d="M124,1054 L119,1054 L119,1059 C119,1059.55 118.552,1060 118,1060 C117.448,1060 117,1059.55 117,1059 L117,1054 L112,1054 C111.448,1054 111,1053.55 111,1053 C111,1052.45 111.448,1052 112,1052 L117,1052 L117,1047 C117,1046.45 117.448,1046 118,1046 C118.552,1046 119,1046.45 119,1047 L119,1052 L124,1052 C124.552,1052 125,1052.45 125,1053 C125,1053.55 124.552,1054 124,1054 L124,1054 Z M130,1037 L106,1037 C103.791,1037 102,1038.79 102,1041 L102,1065 C102,1067.21 103.791,1069 106,1069 L130,1069 C132.209,1069 134,1067.21 134,1065 L134,1041 C134,1038.79 132.209,1037 130,1037 L130,1037 Z"></path></g></g></svg></>}
        {cellAddBtnLabel || ''}
    </>;



    const queryItemObj = () => {
        const _perData = orginalData.filter((item: any) => getCalendarDate(item.date as string) === getCalendarDate(`${year}-${month + 1}-${day}`));

        let _currentData: any = undefined;
        if (_perData[0]) {
            const _items = _perData[0].list;


            if (tableCellId === -1) {
                // add new
                _currentData = {
                    id: 0,
                    date: getCalendarDate(`${year}-${month + 1}-${day}`)
                };
            } else {
                // edit or delete
                _currentData = _items.filter((item: any) => item.id == tableCellId)[0];
            }

        }

        return _perData[0] ? _currentData : {
            id: 0,
            date: getCalendarDate(`${year}-${month + 1}-${day}`)
        };
    };




    // cell
    const getCells = (type: 'none' | 'forward' | 'back' = 'none') => {

        let currentMonth: any = month;
        let currentStartDay: any = startDay;

        // previous month
        if (type === 'forward') {
            const _date = new Date(year, currentMonth - 1, day);
            currentMonth = _date.getMonth();
            currentStartDay = getStartDayOfMonth(_date);
        }

        // next month
        if (type === 'back') {
            const _date = new Date(year, currentMonth + 1, day);
            currentMonth = _date.getMonth();
            currentStartDay = getStartDayOfMonth(_date);
        }


        //
        const allDays = Array(days[currentMonth] + (currentStartDay - 1)).fill(null).map((_: any, i: number) => i); // [0,1,..,30,31]
        const rows = Math.ceil(allDays.length / 7); // 5

        //
        const _tempCells: any[] = Array.from({ length: rows }).fill(null);


        const _getForwardFill = (_year: number, _month: number) => {
            // Get the last day of the previous month
            const lastDayOfLastMonth = new Date(_year, _month - 1, 0);
            const last7Days: Date[] = [];

            // Rewind 7 days forward from the last day
            for (let i = 0; i < 7; i++) {
                last7Days.unshift(new Date(lastDayOfLastMonth));
                lastDayOfLastMonth.setDate(lastDayOfLastMonth.getDate() - 1);
            }
            return last7Days.map((v: Date) => getCalendarDate(v));
        };

        const _getBackFill = (_year: number, _month: number) => {
            // Get the first day of the next month
            const firstDayOfNextMonth = new Date(_year, _month, 1);
            const first7Days: Date[] = [];

            // Rewind 7 days forward from the first day of the next month
            for (let i = 0; i < 7; i++) {
                first7Days.push(new Date(firstDayOfNextMonth));
                firstDayOfNextMonth.setDate(firstDayOfNextMonth.getDate() + 1);
            }

            return first7Days.map((v: Date) => getCalendarDate(v));
        };

       

        // The remaining date of the previous month
        // If the number is 7, the calendar does not include the date of the previous month
        const remainPrevDate = findMondayAndTruncate(_getForwardFill(year, month+1));
        const remainPrevDateTotal = remainPrevDate.length === 7 ? 0 : remainPrevDate.length;

        
        return {
            rowsTotal: orginalData.length,
            colsTotal: allDays.length,
            forwardFillTotal: remainPrevDateTotal,
            list: _tempCells.map((_: any, j: number) => {
                const _col = allDays.slice(j * 7, (j + 1) * 7);
    
    
                // back fill
                const backFillArr: null[] = [];
                for (let k = 0; k < 7 - _col.length; k++) {
                    backFillArr.push(null);
                }
                _col.splice(_col.length, 0, ...backFillArr as any);
    
    
                //
                const isFirstGroup = j === 0;
                const isLastGroup = j === _tempCells.length - 1;
    
    
                // forward fill
                const __forwardFillDate: string[] = _getForwardFill(year, month + 1);
    
                // back fill
                const __backFillDate: string[] = _getBackFill(year, month + 1);
    
    
                const _getDateShow = (_dayIndex: number, _m: number, _startDay: number, _month: number) => {
                    const currentDay = typeof _dayIndex === 'number' ? _dayIndex - (_startDay - 2) : 0; // ..., -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, ...
    
                    // date
                    let _dateShow: any = currentDay > 0 ? `${year}-${_month + 1}-${currentDay}` : '';
    
                    // forward & back
                    if (isFirstGroup && _dateShow === '') {
                        _dateShow = __forwardFillDate.at(currentDay - 1);
                    }
    
                    if (isLastGroup && _dateShow === '') {
                        _dateShow = __backFillDate.at(_m);
                    }
    
    
                    return {
                        date: getCalendarDate(_dateShow),
                        firstGroup: isFirstGroup,
                        lastGroup: isLastGroup,
                        validDisplayDate: currentDay > 0 && currentDay <= days[month]
                    };
    
                }
    
                //
                return {
                    month: currentMonth,
                    startDay: currentStartDay,
                    row: j,
                    col: _col,
                    dateInfo: _col.map((k: number, m: number) => {
                        const _lastWeekDays: number = _col.filter(Boolean).length;
                        return _getDateShow(k, m - _lastWeekDays, currentStartDay, currentMonth);
                    }),
                    weekDisplay: _col.map((k: number, m: number) => {
                        return WEEK[m]
                    }),
                    week: _col.map((k: number, m: number) => {
                        return m
                    }),
    
                }
            })
        }
        
    };


    function updateTodayDate(inputDate: Date) {
        setDay(inputDate.getDate());
        setMonth(inputDate.getMonth());
        setYear(inputDate.getFullYear());
        setStartDay(getStartDayOfMonth(inputDate));

        // update selector
        setSelectedMonth(inputDate.getMonth());
        setSelectedYear(inputDate.getFullYear());

    }


    function getStartDayOfMonth(date: Date) {
        const startDate = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
        return startDate === 0 ? 7 : startDate;
    }

    function isLeapYear(year: number) {
        return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
    }

    const days = isLeapYear(year) ? DAYS_LEAP : DAYS;



    function handlePrevChange() {
        setDate((prevState) => {
            const _date = new Date(year, month - 1, day);

            // update
            setSelectedMonth(_date.getMonth());
            setSelectedYear(_date.getFullYear());

            //
            onChangeMonth?.({
                day: padZero(day),
                month: padZero(_date.getMonth() + 1),
                year: _date.getFullYear().toString()
            });


            return _date;
        });


    }

    function handleNextChange() {
        setDate((prevState) => {
            const _date = new Date(year, month + 1, day);

            // update
            setSelectedMonth(_date.getMonth());
            setSelectedYear(_date.getFullYear());

            //
            onChangeMonth?.({
                day: padZero(day),
                month: padZero(_date.getMonth() + 1),
                year: _date.getFullYear().toString()
            });

            return _date;
        });
    }
    function handleDayChange(e: React.MouseEvent, currentDay: number) {
        setDate(new Date(year, month, currentDay));
    }


    function handleYearChange(currentValue: number) {
        setSelectedYear(currentValue);
        setYear(currentValue);
        setDate(new Date(currentValue, month, day));

        // close win
        setWinYear(false);

    }


    function handleMonthChange(currentIndex: number) {
        setSelectedMonth(currentIndex);
        setMonth(currentIndex);
        setDate(new Date(year, currentIndex, day));

        // close win
        setWinMonth(false);


        //
        onChangeMonth?.({
            day: padZero(day),
            month: padZero(currentIndex + 1),
            year: year.toString()
        });

    }


    function handleTodayChange() {
        setSelectedMonth(now.getMonth());
        setSelectedYear(now.getFullYear());
        updateTodayDate(now);

        //
        const _now = getTodayDate().split('-');
        onChangeToday?.({
            day: _now[2],
            month: _now[1],
            year: _now[0]
        });

    }


    function handleShowWinYear() {
        setWinYear((prevState: boolean) => !prevState);
    }

    function handleShowWinMonth() {
        setWinMonth((prevState: boolean) => !prevState);
    }



    //if user change the selectedYear, then udate the years array that is displayed on year tab view
    useEffect(() => {
        const years: number[] = [];
        for (let y = selectedYear - 10; y < selectedYear + 10; y++) {
            years.push(y as never)
        }
        setYearsCollection(years);
    }, [selectedYear]);


    useEffect(() => {
        // Guaranteed year change triggered by the front and rear buttons
        onChangeYear?.({
            day: padZero(day),
            month: padZero(month + 1),
            year: year.toString()
        });
    }, [year]);



    useEffect(() => {
        updateTodayDate(date);
    }, [date]);


    useEffect(() => {

        // update events value
        if (Array.isArray(eventsValue)) setOrginalData(eventsValue);

        // update current today
        if (typeof customTodayDate === 'string' && customTodayDate !== '' && isValidDate(customTodayDate)) {
            const _customNow = new Date(customTodayDate);
            updateTodayDate(_customNow);
        }

        // Call a function when the list has been rendered completely
        onListRenderComplete?.();

    }, [eventsValue, customTodayDate]);


    return (
        <>

            <div 
                className={combinedCls(
                    "custom-event-cal__wrapper",
                    calendarWrapperClassName
                )}
                onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
                    onKeyPressed?.(e);
                }}
                tabIndex={-1}
            >


                {/*++++++++++++++++ MAIN ++++++++++++++++*/}
                <div className="custom-event-cal__header bg-body-tertiary">
                    <button tabIndex={-1} type="button" className="custom-event-cal__btn custom-event-cal__btn--prev" onClick={handlePrevChange}>
                        <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none">
                            <path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z" fill="#000" />
                        </svg>
                    </button>
                    <div className="custom-event-cal__header__btns">
                        <button tabIndex={-1} type="button" className={`custom-event-cal__btn ${winMonth ? 'active' : ''}`} onClick={handleShowWinMonth}>
                            {MONTHS[month]}
                            <svg width="12px" height="12px" viewBox="0 0 24 24"><path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z" fill="#000000" /></svg>
                        </button>
                        <button tabIndex={-1} type="button" className={`custom-event-cal__btn ${winYear ? 'active' : ''}`} onClick={handleShowWinYear}>
                            {year}
                            <svg width="12px" height="12px" viewBox="0 0 24 24"><path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z" fill="#000000" /></svg>
                        </button>
                    </div>
                    <button tabIndex={-1} type="button" className="custom-event-cal__btn custom-event-cal__btn--next" onClick={handleNextChange}>
                        <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none">
                            <path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z" fill="#000" />
                        </svg>
                    </button>
                </div>
                <div className="custom-event-cal__body">

                    {/* week */}
                    <div className="custom-event-cal__row">
                        {WEEK.map((s: string, i: number) => (
                            <div
                                className={combinedCls(
                                    'custom-event-cal__cell custom-event-cal__day custom-event-cal__day--week custom-event-cal__day--disabled bg-secondary-subtle empty',
                                    {
                                        'last-cell': i === WEEK.length - 1
                                    }
                                )}
                                key={i}
                                data-week={i}
                                dangerouslySetInnerHTML={{
                                    __html: s
                                }}
                            />
                        ))}
                    </div>
                    {/* /week */}

                    {/* day */}
                    {getCells().list.map((item: any, j: number) => {

                        const isLastRow = j === getCells().list.length - 1;

                        return <div key={'row' + item.row} className="custom-event-cal__row">
                            {item.col.map((dayIndex: number | null, i: number) => {

                                const isLastCell = i === item.col.length - 1;

                                // date
                                const _dateShow = item.dateInfo[i].date;
                                const _dateDayShow = _dateShow.split('-').at(-1);

                                // week day
                                const weekDay = item.week[i];

                                // helper
                                const d = parseFloat(_dateDayShow);
                                const _currentData = orginalData.filter((item: any) => getCalendarDate(item.date as string) === _dateShow);
                                const isInteractive = item.dateInfo[i].validDisplayDate;  // The date on which the user interaction can occur, e.g. click, modify
                                const isForward = item.dateInfo[i].firstGroup && !isInteractive;
                                const isBack = item.dateInfo[i].lastGroup && !isInteractive;


                                const _eventContent = () => {

                                    if (
                                        _currentData.length === 0 ||
                                        !Array.isArray(_currentData) ||
                                        typeof _currentData[0].list === 'undefined'
                                    ) {
                                        return null;
                                    }

                                    //
                                    const _items = _currentData[0].list;

                                    return _items.map((cellItem: any, cellItemIndex: number) => {

                                        return <div
                                            className={combinedCls(
                                                `custom-event-cal__cell-item custom-event-cal__cell-item-${cellItemIndex}`,
                                                {
                                                    'first': cellItemIndex === 0,
                                                    'last': cellItemIndex === _items.length - 1
                                                }
                                            )}
                                            key={`cell-item-${cellItemIndex}}`}
                                            data-date={_dateShow}
                                            data-day={_dateDayShow}
                                            data-week={weekDay}
                                            onClick={(e: React.MouseEvent) => {
                                                e.stopPropagation();

                                                // update cell data
                                                setTableCellId(cellItem.id);

                                                // Callback
                                                cellItem.callback?.();


                                                if (isInteractive) {
                                                    handleDayChange(e, d); // update current day

                                                    //
                                                    const _now = cellItem.date.split('-');
                                                    onChangeDate?.(e, {
                                                        ...cellItem,
                                                        day: _now[2],
                                                        month: _now[1],
                                                        year: _now[0]
                                                    });

                                                    if (EVENTS_ENABLED) {
                                                        onModalEditOpen?.(cellItem, () => setShowEdit(true), 'normal');
                                                    }
                                                }
                                            }}
                                        >

                                            {/* ITEM */}
                                            <div
                                                className="custom-event-cal__day__event"
                                                style={typeof cellItem !== 'undefined' && (cellItem as any).eventStyles !== 'undefined' ? cellItem.eventStyles : {}}
                                                dangerouslySetInnerHTML={typeof cellItem.data === 'string' ? {
                                                    __html: cellItem.data
                                                } : undefined}
                                            >
                                                {React.isValidElement(cellItem.data) ? <>{cellItem.data}</> : null}
                                            </div>
                                            {/* /ITEM */}

                                            {/* DELETE BUTTON */}
                                            <div
                                                className={`custom-event-cal__day__eventdel ${cellCloseBtnClassName || ''}`}
                                            >
                                                <a
                                                    href="#"
                                                    tabIndex={-1}
                                                    className="align-middle"
                                                    data-date={getCalendarDate(_dateShow)}
                                                    data-day={padZero(d)}
                                                    data-week={i}
                                                    onClick={(e: React.MouseEvent) => {
                                                        e.preventDefault();
                                                        e.stopPropagation();

                                                        // update cell data
                                                        setTableCellId(cellItem.id);


                                                        const _existsContent = cellItem;

                                                        //
                                                        if (isInteractive) {
                                                            handleDayChange(e, d); // update current day


                                                            //
                                                            const _now = getCalendarDate(`${year}-${month + 1}-${d}`).split('-');
                                                            onChangeDate?.(e, {
                                                                id: 0,
                                                                date: getCalendarDate(`${year}-${month + 1}-${d}`),
                                                                day: _now[2],
                                                                month: _now[1],
                                                                year: _now[0]
                                                            });

                                                            if (EVENTS_DELETE_ENABLED) {
                                                                onModalDeleteOpen?.(_existsContent, () => setShowDelete(true));
                                                            }
                                                        }

                                                    }}
                                                >
                                                    {_delBtn()}
                                                </a>

                                            </div>
                                            {/* /DELETE BUTTON */}
                                        </div>
                                    });
                                };


                                return (
                                    <div
                                        className={combinedCls(
                                            'custom-event-cal__cell custom-event-cal__day',
                                            {
                                                'empty': !isInteractive,
                                                'today': d === now.getDate(),
                                                'selected': d === day,
                                                'last-cell': isLastCell,
                                                'last-row': isLastRow,
                                            }
                                        )}
                                        key={"col" + i}
                                        data-date={getCalendarDate(_dateShow)}
                                        data-day={padZero(d)}
                                        data-week={i}
                                        onMouseEnter={(e: React.MouseEvent) => {
                                            onCellMouseEnter?.(e);
                                        }}
                                        onMouseDown={(e: React.MouseEvent) => {
                                            //
                                            onCellClick?.(e);

                                            if (isInteractive) {
                                                handleDayChange(e, d); // update current day
                                                onChangeDate?.(e, null);
                                            }
                                        }}
                                        onDoubleClick={(e: React.MouseEvent) => {
                                            //
                                            onCellDoubleClick?.(e);
                                        }}
                                        onMouseLeave={(e: React.MouseEvent) => {
                                            onCellMouseLeave?.(e);
                                        }}
                                        onMouseUp={(e: React.MouseEvent) => {
                                            onCellMouseUp?.(e);
                                        }}

                                    >

                                        {/* forward fill & day & back fill */}
                                        <span
                                            className={combinedCls(
                                                {
                                                    'disabled': !isInteractive
                                                }
                                            )}
                                        >
                                            {d}
                                        </span>

                                        {/*++++++++++++++++ EVENT ++++++++++++++++*/}
                                        {_eventContent()}
                                        {/*++++++++++++++++ /EVENT ++++++++++++++++*/}

                                        {/* ADD BUTTON */}
                                        {isForward || isBack ? null : <>
                                            <div
                                                className={`custom-event-cal__day__eventadd ${cellAddBtnClassName || ''}`}
                                            >
                                                <a
                                                    href="#"
                                                    tabIndex={-1}
                                                    className="align-middle"
                                                    data-date={getCalendarDate(_dateShow)}
                                                    data-day={padZero(d)}
                                                    data-week={i}
                                                    onClick={(e: React.MouseEvent) => {
                                                        e.preventDefault();
                                                        e.stopPropagation();

                                                        // update cell data
                                                        setTableCellId(-1);

                                                        //
                                                        if (isInteractive) {
                                                            handleDayChange(e, d); // update current day


                                                            //
                                                            const _now = getCalendarDate(`${year}-${month + 1}-${d}`).split('-');
                                                            onChangeDate?.(e, {
                                                                id: 0,
                                                                date: getCalendarDate(`${year}-${month + 1}-${d}`),
                                                                day: _now[2],
                                                                month: _now[1],
                                                                year: _now[0]
                                                            });

                                                            if (EVENTS_ENABLED) {
                                                                onModalEditOpen?.({
                                                                    id: 0,
                                                                    date: getCalendarDate(`${year}-${month + 1}-${d}`)
                                                                }, () => setShowEdit(true), 'new');
                                                            }
                                                        }
                                                    }}
                                                >
                                                    {_addBtn()}
                                                </a>

                                            </div>
                                        </>}
                                        {/* /ADD BUTTON */}

                                    </div>
                                );
                            })}
                        </div>;

                    })}

                    {/* /day */}

                </div>
                {/*++++++++++++++++ /MAIN ++++++++++++++++*/}


                {/*++++++++++++++++ MONTH SELECTION TAB ++++++++++++++++*/}
                <div className={`custom-event-cal__month-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ${winMonth ? 'active' : ''}`}>
                    <div className="custom-event-cal__month-container">
                        {MONTHS_FULL.map((month, index) => {
                            return <div
                                data-month={padZero(index + 1)}
                                className={`custom-event-cal__month ${selectedMonth === index ? ' selected' : ''}`}
                                key={month + index}
                                onClick={() => { handleMonthChange(index) }}
                            >{month}</div>
                        })}
                    </div>
                </div>
                {/*++++++++++++++++ /MONTH SELECTION TAB ++++++++++++++++*/}

                {/*++++++++++++++++ YEAR SELECTION TAB ++++++++++++++++*/}
                <div className={`custom-event-cal__year-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ${winYear ? 'active' : ''}`}>
                    <div className="custom-event-cal__year-container bg-body-tertiary">
                        {yearsArray.map((year, index) => {
                            return <div
                                data-year={year}
                                className={`custom-event-cal__year ${selectedYear === year ? ' selected' : ''}`}
                                key={year + index}
                                onClick={() => { handleYearChange(year) }}
                            >{year}</div>
                        })}
                    </div>

                </div>
                {/*++++++++++++++++ /YEAR SELECTION TAB ++++++++++++++++*/}



                {/*++++++++++++++++ TODAY SELECTION TAB ++++++++++++++++*/}
                <div className="custom-event-cal__today-wrapper p-2 bg-body-tertiary">
                    <button tabIndex={-1} type="button" className="custom-event-cal__btn custom-event-cal__btn--today" onClick={handleTodayChange}>
                        {langToday || 'Today'}
                    </button>
                </div>
                {/*++++++++++++++++ /TODAY SELECTION TAB ++++++++++++++++*/}


            </div>


            {/*++++++++++++++++ MODAL ++++++++++++++++*/}
            {EVENTS_ENABLED ? <>

                {/*<!-- DELETE -->*/}
                <ModalDialog
                    ref={modalDeleteHandleRef}
                    show={showDelete}
                    maskOpacity={modalMaskOpacity}
                    triggerClassName=""
                    triggerContent=""
                    closeBtnClassName={modalCloseBtnClassName || 'btn btn-secondary'}
                    closeBtnLabel={modalCloseBtnLabel || 'Close'}
                    submitBtnClassName={modalSubmitDeleteBtnClassName || 'btn btn-danger'}
                    submitBtnLabel={modalSubmitDeleteBtnLabel || <>Delete</>}
                    onClose={(e) => {

                        setTimeout(() => {
                            setShowDelete(false);
                            onModalDeleteClose?.(queryItemObj());
                        }, 350);
                    }}
                    onSubmit={async (e: any, closewin: Function, data: any) => {
                        onModalDeleteEvent?.(queryItemObj(), closewin);

                    }}
                >
                    {modalDeleteContent || 'Are you sure?'}

                </ModalDialog>
                {/*<!-- /DELETE -->*/}


                {/*<!-- EDIT -->*/}
                <ModalDialog
                    ref={modalEditHandleRef}
                    show={showEdit}
                    maskOpacity={modalMaskOpacity}
                    heading={modalHeading}
                    maxWidth={modalMaxWidth}
                    minHeight={modalMinHeight}
                    triggerClassName=""
                    triggerContent=""
                    closeBtnClassName={modalCloseBtnClassName || 'btn btn-secondary'}
                    closeBtnLabel={modalCloseBtnLabel || 'Close'}
                    submitBtnClassName={modalSubmitBtnClassName || 'btn btn-primary'}
                    submitBtnLabel={modalSubmitBtnLabel || <>Save</>}
                    onClose={(e) => {
                        setTimeout(() => {
                            setShowEdit(false);
                            onModalEditClose?.(queryItemObj());
                        }, 350);
                    }}
                    onSubmit={async (e: any, closewin: Function, data: any) => {
                        onModalEditEvent?.(queryItemObj(), closewin);

                    }}
                >
                    {modalContent}

                </ModalDialog>
                {/*<!-- /EDIT -->*/}


            </> : null}
            {/*++++++++++++++++ /MODAL ++++++++++++++++*/}


        </>
    )
};


export default EventCalendar;