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 } from 'react';
import { Flex } from '../flex/flex.js';
import { Popover } from '../popover/popover.js';
import { TextField } from '../textfield/textfield.js';
import { Calendar } from './calendar.js';
import styles from './calendar.module.css.js';

function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldsProps = {}, placeholders, calendarProps, onSelect = () => { }, value = {
    to: new Date(),
    from: new Date(),
}, pickerGroupClassName, children, showCalendarIcon = true, footer, }) {
    const [showCalendar, setShowCalendar] = useState(false);
    const [currentRangeField, setCurrentRangeField] = useState("from");
    const [selectedRange, setSelectedRange] = useState(value);
    const startDate = selectedRange.from ? dayjs(selectedRange.from).format(dateFormat) : '';
    const endDate = selectedRange.to ? dayjs(selectedRange.to).format(dateFormat) : '';
    // 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) => {
        const from = selectedRange?.from || range?.from;
        let newRange;
        if (currentRangeField === "to") {
            if (dayjs(selectedDay).isSame(dayjs(from), 'day')) {
                // If same date is clicked twice, set end date to the same date for UI
                newRange = {
                    from,
                    to: selectedDay
                };
            }
            else if (dayjs(selectedDay).isAfter(dayjs(from))) {
                // If different date is selected and it's after start date
                newRange = { from, to: selectedDay };
            }
            else {
                // If selected date is before start date, reset and select start day
                newRange = { from: selectedDay };
            }
            setCurrentRangeField("from");
        }
        else {
            // Reset the range and select start day
            newRange = { from: selectedDay };
            setCurrentRangeField("to");
        }
        setSelectedRange(newRange);
        // Return the range with +1 day for the end date in the callback
        const callbackRange = {
            from: newRange.from,
            to: newRange.to ? dayjs(newRange.to).add(1, 'day').toDate() : undefined
        };
        onSelect(callbackRange);
    };
    function onOpenChange(open) {
        setShowCalendar(Boolean(open));
    }
    const defaultTrigger = (jsxRuntimeExports.jsxs(Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntimeExports.jsx(TextField, { value: startDate, trailing: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, className: styles.datePickerInput, readOnly: true, ...(textFieldsProps.startDate ?? {}), placeholder: placeholders?.startDate || "Select start date" }), jsxRuntimeExports.jsx(TextField, { value: endDate, trailing: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, className: styles.datePickerInput, readOnly: true, ...(textFieldsProps.endDate ?? {}), placeholder: placeholders?.endDate || "Select end date" })] }));
    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, mode: "range", selected: selectedRange, onSelect: handleSelect }), footer && (jsxRuntimeExports.jsx(Flex, { align: "center", justify: "center", className: styles.calendarFooter, children: footer }))] })] }));
}

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