"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { CalendarIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
import dayjs from '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.js';
import { useState, useMemo, useCallback } from 'react';
import { Flex } from '../flex/flex.js';
import { InputField } from '../input-field/input-field.js';
import { Popover } from '../popover/popover.js';
import { Calendar } from './calendar.js';
import styles from './calendar.module.css.js';

function RangePicker({ dateFormat = 'DD/MM/YYYY', inputFieldsProps = {}, calendarProps, onSelect = () => { }, value, defaultValue = {
    to: new Date(),
    from: new Date()
}, pickerGroupClassName, children, showCalendarIcon = true, footer, timeZone, popoverProps }) {
    const [showCalendar, setShowCalendar] = useState(false);
    const [currentRangeField, setCurrentRangeField] = useState('from');
    const [internalValue, setInternalValue] = useState(value ?? defaultValue);
    const [currentMonth, setCurrentMonth] = useState(internalValue?.from);
    const selectedRange = value ?? internalValue;
    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]);
    const onTriggerClick = useCallback((e) => {
        const field = e.currentTarget.dataset.rangeField;
        if (field === 'start') {
            setCurrentRangeField('from');
        }
        else {
            setCurrentRangeField('to');
        }
        if (showCalendar) {
            e.preventDefault();
            e.stopPropagation();
        }
    }, [showCalendar]);
    // Handle date selection with custom logic
    const handleSelect = (_, selectedDay) => {
        let newRange = { ...selectedRange };
        let newCurrentRangeField = currentRangeField;
        if (currentRangeField === 'from') {
            // If selecting start date and it's after the current end date
            if (selectedRange?.to &&
                dayjs(selectedDay).isAfter(dayjs(selectedRange.to))) {
                newRange = { from: selectedDay };
                newCurrentRangeField = 'to';
            }
            else {
                newRange.from = selectedDay;
                if (!selectedRange?.to)
                    newCurrentRangeField = 'to';
            }
        }
        else {
            // If selecting end date and it's before the current start date
            if (selectedRange?.from &&
                dayjs(selectedDay).isBefore(dayjs(selectedRange.from))) {
                newRange = { from: selectedDay };
                newCurrentRangeField = 'to';
            }
            else
                newRange.to = selectedDay;
        }
        if (newCurrentRangeField !== currentRangeField)
            setCurrentRangeField(newCurrentRangeField);
        setInternalValue(newRange);
        onSelect(newRange);
    };
    const defaultTrigger = (jsxs(Flex, { gap: 'medium', className: pickerGroupClassName, children: [jsx(InputField, { size: 'small', placeholder: 'Select start date', trailingIcon: showCalendarIcon ? jsx(CalendarIcon, {}) : undefined, className: styles.datePickerInput, ...(inputFieldsProps.startDate ?? {}), value: startDate, readOnly: true, "data-range-field": 'start', "data-active": showCalendar && currentRangeField === 'from', onClick: onTriggerClick }), jsx(InputField, { size: 'small', placeholder: 'Select end date', trailingIcon: showCalendarIcon ? jsx(CalendarIcon, {}) : undefined, className: styles.datePickerInput, ...(inputFieldsProps.endDate ?? {}), value: endDate, readOnly: true, "data-range-field": 'end', "data-active": showCalendar && currentRangeField === 'to', onClick: onTriggerClick })] }));
    const trigger = typeof children === 'function'
        ? children({ startDate, endDate })
        : children || defaultTrigger;
    return (jsxs(Popover, { open: showCalendar, onOpenChange: setShowCalendar, children: [jsx(Popover.Trigger, { asChild: true, children: trigger }), jsxs(Popover.Content, { ...popoverProps, className: cx(styles.calendarPopover, popoverProps?.className), side: popoverProps?.side ?? 'top', children: [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 && (jsx(Flex, { align: 'center', justify: 'center', className: styles.calendarFooter, children: footer }))] })] }));
}

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