"use client";
import { jsx, jsxs } from 'react/jsx-runtime';
import { ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.2.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
import { cx, cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
import { useState, useEffect } from 'react';
import { Flex } from '../flex/flex.js';
import { IconButton } from '../icon-button/icon-button.js';
import { Select } from '../select/select.js';
import { Skeleton } from '../skeleton/skeleton.js';
import { Tooltip } from '../tooltip/tooltip.js';
import styles from './calendar.module.css.js';
import { DayPicker } from '../../node_modules/.pnpm/react-day-picker@9.6.7_react@19.2.1/node_modules/react-day-picker/dist/esm/DayPicker.js';
import { dateLib } from '../../node_modules/.pnpm/react-day-picker@9.6.7_react@19.2.1/node_modules/react-day-picker/dist/esm/classes/DateLib.js';

const root = cva(styles.calendarRoot);
function DropDown({ options = [], value, onChange, onDropdownOpen, disabled }) {
    const [open, setOpen] = useState(false);
    useEffect(() => {
        if (open && onDropdownOpen)
            onDropdownOpen();
    }, [open, onDropdownOpen]);
    function handleChange(value) {
        if (onChange) {
            onChange({ target: { value } });
        }
    }
    return (jsxs(Select, { value: value?.toString(), onValueChange: handleChange, open: open, onOpenChange: setOpen, children: [jsx(Select.Trigger, { className: styles.dropdownTrigger, iconProps: {
                    className: styles.dropdownIcon
                }, size: 'small', variant: 'text', disabled: disabled, children: jsx(Select.Value, {}) }), jsxs(Select.Content, { className: styles.dropdownContent, children: [jsx(Select.ScrollUpButton, { asChild: true, children: jsx(Flex, { justify: 'center', children: jsx(ChevronUpIcon, {}) }) }), jsx(Select.Viewport, { children: options.map(opt => (jsx(Select.Item, { value: opt.value.toString(), disabled: opt.disabled, children: opt.label }, opt.value))) }), jsx(Select.ScrollDownButton, { asChild: true, children: jsx(Flex, { justify: 'center', children: jsx(ChevronDownIcon, {}) }) })] })] }));
}
const Calendar = function ({ className, classNames, showOutsideDays = true, onDropdownOpen, showTooltip = false, tooltipMessages = {}, dateInfo = {}, loadingData = false, timeZone, ...props }) {
    return (jsx(DayPicker, { showOutsideDays: showOutsideDays, timeZone: timeZone, components: {
            Chevron: props => {
                const icon = props.orientation === 'left' ? (jsx(ChevronLeftIcon, {})) : (jsx(ChevronRightIcon, {}));
                return (jsx(IconButton, { ...props, disabled: loadingData, className: cx(props.className, loadingData && styles.disabled), size: 3, "aria-label": props.orientation === 'left' ? 'Previous month' : 'Next month', children: icon }));
            },
            Dropdown: (props) => (jsx(DropDown, { ...props, onDropdownOpen: onDropdownOpen, disabled: loadingData })),
            DayButton: props => {
                const { day, ...buttonProps } = props;
                const dateKey = dateLib.format(day.date, 'dd-MM-yyyy');
                const message = tooltipMessages[dateKey];
                // Support both object and function for dateInfo
                const dateComponent = typeof dateInfo === 'function'
                    ? dateInfo(day.date)
                    : dateInfo[dateKey];
                const hasDateInfo = Boolean(dateComponent);
                return (jsx(Tooltip, { side: 'top', disabled: loadingData || !showTooltip || !message, message: message, children: jsxs("button", { ...buttonProps, className: cx(buttonProps.className, hasDateInfo && styles.dayButtonWithInfo), children: [hasDateInfo && (jsx("div", { className: styles.dayInfo, children: dateComponent })), jsx("span", { className: styles.dayNumber, children: buttonProps.children })] }) }));
            },
            MonthGrid: props => loadingData ? (jsx(Skeleton, { count: 5, height: '18px', width: '252px', style: { marginBottom: 'var(--rs-space-6)' } })) : (jsx("table", { ...props }))
        }, classNames: {
            caption_label: styles.captionLabel,
            button_previous: `${styles.navButton} ${styles.navButtonPrevious}`,
            button_next: `${styles.navButton} ${styles.navButtonNext}`,
            month_caption: styles.monthCaption,
            months: styles.months,
            nav: styles.nav,
            day: styles.day,
            today: styles.today,
            outside: styles.outside,
            week: styles.week,
            weekdays: styles.week,
            weekday: styles.weekday,
            disabled: styles.disabled,
            selected: styles.selected,
            day_button: styles.dayButton,
            range_middle: styles.rangeMiddle,
            range_end: styles.rangeEnd,
            range_start: styles.rangeStart,
            hidden: styles.hidden,
            dropdowns: styles.dropdowns,
            ...classNames
        }, className: root({ className }), mode: 'single', ...props }));
};

export { Calendar };
//# sourceMappingURL=calendar.js.map
