import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import dayjs from "dayjs";
import { useState } from "react";
import Calendar from "react-calendar";
import { Button } from "../../button";
import { calendarStyles } from "../filter-styles";
export default function DateFilter({ selectedView, selectedDate, setSelectedDate, setFilters, filters, handleClose, filterGroups, }) {
    const [dateRange, setDateRange] = useState([null, null]);
    const [localDateRange, setLocalDateRange] = useState([null, null]);
    const selectedGroup = filterGroups.find(g => g.name === selectedView);
    const isDateRange = selectedGroup?.multiple;
    // Create maxDate set to end of today to ensure today is selectable
    const maxDate = new Date();
    maxDate.setHours(23, 59, 59, 999);
    // Use local state for immediate feedback, fall back to dateRange
    const effectiveDateRange = [
        localDateRange[0] || dateRange[0],
        localDateRange[1] || dateRange[1]
    ];
    const handleDateChange = (value) => {
        if (isDateRange) {
            // Handle date range selection
            if (Array.isArray(value)) {
                // Update local state immediately for visual feedback
                setLocalDateRange([value[0], value[1]]);
                // Also update the main dateRange state
                setDateRange([value[0], value[1]]);
            }
            else {
                // Single date in range mode
                setLocalDateRange([value, null]);
                setDateRange([value, null]);
            }
        }
        else {
            // Handle single date selection
            const date = Array.isArray(value) ? value[0] : value;
            setSelectedDate(date || undefined);
            if (date) {
                // Set date to start of day (00:00)
                const selectedDateStart = new Date(date);
                selectedDateStart.setHours(0, 0, 0, 0);
                setFilters([
                    ...filters,
                    {
                        name: selectedView || "",
                        placeholder: selectedGroup?.placeholder,
                        value: [
                            {
                                value: selectedDateStart.toISOString(),
                                label: dayjs(selectedDateStart).format("LLL dd, y"),
                            }
                        ],
                        type: selectedGroup?.type || "date",
                        multiple: selectedGroup?.multiple || false,
                    },
                ]);
                handleClose();
            }
        }
    };
    const handleApplyDateRange = () => {
        if (dateRange[0]) {
            const startDate = new Date(dateRange[0]);
            const endDate = dateRange[1] ? new Date(dateRange[1]) : new Date(dateRange[0]);
            // Set start date to beginning of day
            startDate.setHours(0, 0, 0, 0);
            // Set end date to end of day
            endDate.setHours(23, 59, 59, 999);
            const filterValue = [];
            filterValue.push({
                value: startDate.toISOString(),
                label: dayjs(startDate).format("LLL dd, y"),
            });
            if (dateRange[1] && dateRange[0].getTime() !== dateRange[1].getTime()) {
                filterValue.push({
                    value: endDate.toISOString(),
                    label: dayjs(endDate).format("LLL dd, y"),
                });
            }
            setFilters([
                ...filters,
                {
                    name: selectedView || "",
                    placeholder: selectedGroup?.placeholder,
                    value: filterValue,
                    type: selectedGroup?.type || "date",
                    multiple: selectedGroup?.multiple || false,
                },
            ]);
            handleClose();
        }
    };
    const getDisplayText = () => {
        if (isDateRange) {
            if (effectiveDateRange[0] && effectiveDateRange[1]) {
                return (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-muted", children: "From:" }), _jsx("span", { className: "text-xs font-medium", children: dayjs(effectiveDateRange[0]).format("MMMM DD, YYYY") }), _jsx("span", { className: "text-xs text-muted", children: "To:" }), _jsx("span", { className: "text-xs font-medium", children: dayjs(effectiveDateRange[1]).format("MMMM DD, YYYY") })] }));
            }
            else if (effectiveDateRange[0]) {
                return (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-muted", children: "From:" }), _jsx("span", { className: "text-xs font-medium", children: dayjs(effectiveDateRange[0]).format("MMMM DD, YYYY") }), _jsx("span", { className: "text-xs text-muted", children: "\u2192 Select end date" })] }));
            }
            else {
                return _jsx("span", { className: "text-muted text-xs", children: selectedGroup?.placeholder || selectedGroup?.name || selectedView || "Select date range" });
            }
        }
        else {
            return selectedDate ? dayjs(selectedDate).format("MMMM DD, YYYY") : "Pick a date";
        }
    };
    return (_jsx("div", { className: "p-2", children: isDateRange ? (_jsxs(_Fragment, { children: [_jsx("div", { children: getDisplayText() }), _jsxs("div", { className: "calendar-wrapper", children: [_jsx("style", { children: calendarStyles }), _jsx(Calendar, { value: effectiveDateRange, onChange: handleDateChange, selectRange: true, returnValue: "range", maxDate: maxDate, className: "mb-2 border-0", tileClassName: ({ date, view }) => {
                                if (view === 'month') {
                                    const currentDate = date.getTime();
                                    const today = new Date();
                                    today.setHours(23, 59, 59, 999);
                                    // Check if date is disabled (future date)
                                    if (currentDate > today.getTime()) {
                                        return 'text-muted/20 cursor-not-allowed';
                                    }
                                    // Handle selected date styling
                                    if (effectiveDateRange[0]) {
                                        const startDate = effectiveDateRange[0].getTime();
                                        if (effectiveDateRange[1]) {
                                            // Both dates selected
                                            const endDate = effectiveDateRange[1].getTime();
                                            if (currentDate === startDate) {
                                                return 'bg-primary text-primary-foreground rounded-l-md font-semibold';
                                            }
                                            if (currentDate === endDate) {
                                                return 'bg-primary text-primary-foreground rounded-r-md font-semibold';
                                            }
                                            if (currentDate > startDate && currentDate < endDate) {
                                                return 'bg-primary/20 text-primary font-medium';
                                            }
                                        }
                                        else {
                                            // Only start date selected
                                            if (currentDate === startDate) {
                                                return 'bg-primary text-primary-foreground rounded-md font-semibold';
                                            }
                                        }
                                    }
                                }
                                return '';
                            } }, `${effectiveDateRange[0]?.getTime()}-${effectiveDateRange[1]?.getTime()}`)] }), _jsx("div", { className: "border-t pt-2", children: _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: handleClose, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleApplyDateRange, disabled: !effectiveDateRange[0], children: "Apply" })] }) })] })) : (_jsx(_Fragment, { children: _jsxs("div", { className: "calendar-wrapper", children: [_jsx("style", { children: calendarStyles }), _jsx(Calendar, { value: selectedDate, onChange: handleDateChange, selectRange: false, maxDate: maxDate, className: "mb-2 border-0", tileClassName: ({ date, view }) => {
                            if (view === 'month') {
                                const currentDate = date.getTime();
                                const today = new Date();
                                today.setHours(23, 59, 59, 999);
                                // Check if date is disabled (future date)
                                if (currentDate > today.getTime()) {
                                    return 'text-muted/20 cursor-not-allowed';
                                }
                                // Handle selected date styling
                                if (selectedDate && currentDate === selectedDate.getTime()) {
                                    return 'bg-primary text-primary-foreground rounded-md font-semibold';
                                }
                            }
                            return '';
                        } })] }) })) }));
}
//# sourceMappingURL=dateFilter.js.map