import moment from 'moment';
import { useEffect, useState } from 'react';
import { PiArrowRightBold, PiArrowLeftBold } from "react-icons/pi";
moment.updateLocale('en', {
    week: {
        dow: 1, // Monday is the first day of the week
    },
});

function AdmuiCalendar({ rect, value, select, close }) {

    const backdropClick = () => {
        close()
    }
    const [calendar, setCalendar] = useState(null);

    const [refDate, setRefdate] = useState(value);

    useEffect(() => {
        const _selected = moment.utc(value, 'YYYY-MM-DD');
        const selected = _selected.isValid() ? _selected.format('YYYY-MM-DD') : null;
        const _date = moment.utc(refDate, 'YYYY-MM-DD');
        const date = _date.isValid() ? _date : moment();
        const today = moment().format('YYYY-MM-DD');

        const startDate = date.clone().startOf('month').startOf('week').add(-0, 'days').startOf('week');
        const endDate = date.clone().endOf('month').endOf('week').add(0, 'days').endOf('week');
        // console.log(startDate.format('YYYY-MM-DD'), date.format('YYYY-MM-DD'), endDate.format('YYYY-MM-DD'));
        const days = [];
        for (let day = startDate.clone(); day.isSameOrBefore(endDate, 'day'); day.add(1, 'day')) {
            // console.log(day.format('YYYY-MM-DD'));
            days.push({
                day,
                display: day.format('DD'),
                value: day.format('YYYY-MM-DD'),
                off: day.format('MM') !== date.format('MM'),
                today: day.format('YYYY-MM-DD') === today,
                selected: day.format('YYYY-MM-DD') === selected
            })
        }
        // console.log(days);
        setCalendar({ days, info: date.format('YYYY-MMMM') });
    }, [refDate])

    const selectDate = (val) => {
        select(val);
        backdropClick();
    }
    const inc = (e) => {
        e.preventDefault();
        e.stopPropagation();
        setRefdate(prev => moment(prev, 'YYYY-MM-DD').add(1, 'month').format('YYYY-MM-DD'));
    }
    const dec = (e) => {
        e.preventDefault();
        e.stopPropagation();
        setRefdate(prev => moment(prev, 'YYYY-MM-DD').add(-1, 'month').format('YYYY-MM-DD'));
    }

    return (
        <>
            <div className="aui-backdrop" onClick={(e) => backdropClick(e)}>
                {!rect ? '' : (
                    <div className="aui-control-calendar-container" style={{ top: `${rect.y + rect.height}px`, left: `${rect.x + rect.width - 300}px` }}>

                        <div className="aui-control-calendar-navigation">
                            <div className="aui-control-calendar-navigation-arrow" onClick={(e) => dec(e)}>
                                <PiArrowLeftBold />
                            </div>
                            <div className="aui-control-calendar-navigation-display">
                                {calendar?.info}
                            </div>
                            <div className="aui-control-calendar-navigation-arrow" onClick={(e) => inc(e)}>
                                <PiArrowRightBold />
                            </div>
                            {/* <div onClick={(e) => inc(e)}>incr</div> */}
                        </div>
                        <div className="aui-control-calendar-days-header">
                            <div>M</div>
                            <div>T</div>
                            <div>W</div>
                            <div>T</div>
                            <div>F</div>
                            <div>S</div>
                            <div>S</div>
                        </div>
                        <div className="aui-control-calendar-days-container">
                            {calendar?.days.map((m, index) =>
                                <div
                                    key={index}
                                    className={`
                                        aui-control-calendar-day 
                                        ${m.off ? 'aui-control-calendar-day-off' : ''}
                                        ${m.today ? 'aui-control-calendar-day-today' : ''}
                                        ${m.selected ? 'aui-control-calendar-day-selected' : ''}
                                        `}
                                    onClick={() => selectDate(m.value)}>{m.display}</div>
                            )}
                        </div>
                    </div>
                )}
            </div>
        </>
    )
}
export default AdmuiCalendar