import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.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';
import { useState } from 'react';
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 { Flex } from '../flex/flex.js';

function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldProps, calendarProps, onSelect = () => { }, value = {
    to: new Date(),
    from: new Date(),
}, pickerGroupClassName, children, }) {
    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" && dayjs(selectedDay).isAfter(dayjs(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 = (jsxRuntimeExports.jsxs(Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntimeExports.jsx(TextField, { value: startDate, trailing: jsxRuntimeExports.jsx(CalendarIcon, {}), className: styles.datePickerInput, readOnly: true, ...textFieldProps }), jsxRuntimeExports.jsx(TextField, { value: endDate, trailing: jsxRuntimeExports.jsx(CalendarIcon, {}), className: styles.datePickerInput, readOnly: true, ...textFieldProps })] }));
    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.jsx(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 }) })] }));
}

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