'use strict';

var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
var popover = require('../popover/popover.cjs');
var textfield = require('../textfield/textfield.cjs');
var calendar = require('./calendar.cjs');
var calendar_module = require('./calendar.module.css.cjs');
var React = require('react');
var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
var dayjs_min = require('../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.cjs');
var flex = require('../flex/flex.cjs');

function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldProps, calendarProps, onSelect = () => { }, value = {
    to: new Date(),
    from: new Date(),
}, pickerGroupClassName, children, }) {
    const [showCalendar, setShowCalendar] = React.useState(false);
    const [currentRangeField, setCurrentRangeField] = React.useState("from");
    const [selectedRange, setSelectedRange] = React.useState(value);
    const startDate = selectedRange.from ? dayjs_min.default(selectedRange.from).format(dateFormat) : '';
    const endDate = selectedRange.to ? dayjs_min.default(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" && dayjs_min.default(selectedDay).isAfter(dayjs_min.default(from))) {
            // update the end date
            newRange = { from, to: selectedDay };
            setCurrentRangeField("from");
        }
        else {
            // reset the range and select start day
            newRange = { from: selectedDay };
            setCurrentRangeField("to");
        }
        setSelectedRange(newRange);
        onSelect(newRange);
    };
    function onOpenChange(open) {
        setShowCalendar(Boolean(open));
    }
    const defaultTrigger = (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField, { value: startDate, trailing: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CalendarIcon, {}), className: calendar_module.default.datePickerInput, readOnly: true, ...textFieldProps }), jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField, { value: endDate, trailing: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CalendarIcon, {}), className: calendar_module.default.datePickerInput, readOnly: true, ...textFieldProps })] }));
    const trigger = typeof children === 'function'
        ? children({ startDate, endDate })
        : children || defaultTrigger;
    return (jsxRuntime.jsxRuntimeExports.jsxs(popover.Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntime.jsxRuntimeExports.jsx(popover.Popover.Trigger, { asChild: true, children: trigger }), jsxRuntime.jsxRuntimeExports.jsx(popover.Popover.Content, { side: side, className: calendar_module.default.calendarPopover, children: jsxRuntime.jsxRuntimeExports.jsx(calendar.Calendar, { showOutsideDays: false, numberOfMonths: 2, defaultMonth: selectedRange.from, required: true, ...calendarProps, mode: "range", selected: selectedRange, onSelect: handleSelect }) })] }));
}

exports.RangePicker = RangePicker;
//# sourceMappingURL=range-picker.cjs.map
