import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
import { CalendarIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
import dayjs from '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.js';
import { useState, useRef, useMemo } from 'react';
import { Flex } from '../flex/flex.js';
import { Popover } from '../popover/popover.js';
import { Calendar } from './calendar.js';
import styles from './calendar.module.css.js';
import { InputField } from '../input-field/input-field.js';

function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps = {}, calendarProps, onSelect = () => { }, value = {
    to: new Date(),
    from: new Date(),
}, pickerGroupClassName, children, showCalendarIcon = true, footer, timeZone, }) {
    const [showCalendar, setShowCalendar] = useState(false);
    const [currentRangeField, setCurrentRangeField] = useState("from");
    const [selectedRange, setSelectedRange] = useState(value);
    const [currentMonth, setCurrentMonth] = useState(selectedRange?.from);
    const prevSelectedRangeRef = useRef(selectedRange);
    const startDate = selectedRange.from
        ? dayjs(selectedRange.from).format(dateFormat)
        : "";
    const endDate = selectedRange.to
        ? dayjs(selectedRange.to).format(dateFormat)
        : "";
    // Ensures two months are visible even when
    // current month is the last allowed month (endMonth).
    const computedDefaultMonth = useMemo(() => {
        let month = currentMonth;
        if (calendarProps?.endMonth) {
            const endMonth = dayjs(calendarProps.endMonth);
            const fromMonth = dayjs(currentMonth);
            if (fromMonth.isSame(endMonth, 'month')) {
                month = endMonth.subtract(1, 'month').toDate();
            }
        }
        return month;
    }, [currentMonth, calendarProps?.endMonth]);
    // 1st click will select the start date.
    // 2nd click will select the end date.
    // 3rd click will select the start date again.
    const handleSelect = (range, selectedDay) => {
        // TODO: Remove custom logic and reuse the default logic from react-day-picker
        let newRange;
        if (currentRangeField === "from") {
            // First click - set from date and prepare for to date selection
            newRange = { from: selectedDay };
            setCurrentRangeField("to");
        }
        else {
            // Second click - setting to date
            const from = selectedRange.from;
            if (dayjs(selectedDay).isBefore(dayjs(from))) {
                // If selected date is before current from date, start new range
                newRange = { from: selectedDay };
                setCurrentRangeField("to");
            }
            else {
                // Set the to date
                newRange = { from, to: selectedDay };
                setCurrentRangeField("from");
            }
        }
        setSelectedRange(newRange);
        onSelect(newRange);
    };
    function onOpenChange(open) {
        const currOpen = Boolean(open);
        setShowCalendar(currOpen);
        // Reset selected range if calendar is closed and start or end date is empty
        if (!currOpen && (!startDate.length || !endDate.length)) {
            setSelectedRange(prevSelectedRangeRef.current);
            onSelect(prevSelectedRangeRef.current);
        }
        // Update previous selected range reference when both start and end dates are selected
        if (!currOpen && startDate.length && endDate.length) {
            prevSelectedRangeRef.current = selectedRange;
        }
    }
    const defaultTrigger = (jsxRuntimeExports.jsxs(Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntimeExports.jsx(InputField, { size: 'small', placeholder: "Select start date", trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, className: styles.datePickerInput, ...(inputFieldsProps.startDate ?? {}), value: startDate, readOnly: true }), jsxRuntimeExports.jsx(InputField, { size: 'small', placeholder: "Select end date", trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, className: styles.datePickerInput, ...(inputFieldsProps.endDate ?? {}), value: endDate, readOnly: true })] }));
    const trigger = typeof children === "function"
        ? children({ startDate, endDate })
        : children || defaultTrigger;
    return (jsxRuntimeExports.jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntimeExports.jsx(Popover.Trigger, { asChild: true, children: trigger }), jsxRuntimeExports.jsxs(Popover.Content, { side: side, className: styles.calendarPopover, children: [jsxRuntimeExports.jsx(Calendar, { showOutsideDays: false, numberOfMonths: 2, defaultMonth: selectedRange.from, required: true, ...calendarProps, timeZone: timeZone, mode: "range", month: computedDefaultMonth, selected: selectedRange, onSelect: handleSelect, onMonthChange: setCurrentMonth }), footer && (jsxRuntimeExports.jsx(Flex, { align: "center", justify: "center", className: styles.calendarFooter, children: footer }))] })] }));
}

export { RangePicker };
//# sourceMappingURL=range-picker.js.map
