import { j as jsxRuntimeExports } from '../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
import { DayPicker } from '../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/DayPicker.js';
import { useState, useEffect } from 'react';
import '../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/useDayPicker.js';
import { dateLib } from '../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/lib/dateLib.js';
import '../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/UI.js';
import { cva } from '../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
import { ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon } 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 styles from './calendar.module.css.js';
import { Select } from '../select/select.js';
import { Flex } from '../flex/flex.js';
import { Tooltip } from '../tooltip/tooltip.js';
import Skeleton from '../node_modules/.pnpm/react-loading-skeleton@3.4.0_react@18.2.0/node_modules/react-loading-skeleton/dist/index.js';

const root = cva(styles.calendarRoot);
function DropDown({ options = [], value, onChange, onDropdownOpen, }) {
    const [open, setOpen] = useState(false);
    useEffect(() => {
        if (open && onDropdownOpen)
            onDropdownOpen();
    }, [open]);
    function handleChange(value) {
        if (onChange) {
            onChange({ target: { value } });
        }
    }
    return (jsxRuntimeExports.jsxs(Select, { value: value?.toString(), onValueChange: handleChange, open: open, onOpenChange: setOpen, children: [jsxRuntimeExports.jsx(Select.Trigger, { className: styles.dropdown_trigger, iconProps: {
                    className: styles.dropdown_icon,
                }, children: jsxRuntimeExports.jsx(Select.Value, {}) }), jsxRuntimeExports.jsxs(Select.Content, { className: styles.dropdown_content, children: [jsxRuntimeExports.jsx(Select.ScrollUpButton, { asChild: true, children: jsxRuntimeExports.jsx(Flex, { justify: 'center', children: jsxRuntimeExports.jsx(ChevronUpIcon, {}) }) }), jsxRuntimeExports.jsx(Select.Viewport, { children: options.map((opt) => (jsxRuntimeExports.jsx(Select.Item, { value: opt.value.toString(), disabled: opt.disabled, textProps: {
                                className: styles.dropdown_item_text,
                            }, children: opt.label }, opt.value))) }), jsxRuntimeExports.jsx(Select.ScrollDownButton, { asChild: true, children: jsxRuntimeExports.jsx(Flex, { justify: 'center', children: jsxRuntimeExports.jsx(ChevronDownIcon, {}) }) })] })] }));
}
const Calendar = function ({ className, classNames, showOutsideDays = true, onDropdownOpen, showTooltip = false, tooltipMessages = {}, loadingData = false, ...props }) {
    return (jsxRuntimeExports.jsx(DayPicker, { showOutsideDays: showOutsideDays, components: {
            Chevron: (props) => {
                if (props.orientation === 'left') {
                    return jsxRuntimeExports.jsx(ChevronLeftIcon, { ...props });
                }
                return jsxRuntimeExports.jsx(ChevronRightIcon, { ...props });
            },
            Dropdown: (props) => (jsxRuntimeExports.jsx(DropDown, { ...props, onDropdownOpen: onDropdownOpen })),
            DayButton: (props) => {
                const { day, ...buttonProps } = props;
                const message = tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];
                return (jsxRuntimeExports.jsx(Tooltip, { side: "top", disabled: loadingData || !showTooltip || !message, message: message, children: jsxRuntimeExports.jsx("button", { ...buttonProps }) }));
            },
            MonthGrid: (props) => loadingData ? (jsxRuntimeExports.jsx(Skeleton, { count: 6, height: '12px', width: '252px', style: { marginBottom: 'var(--space-5)' }, highlightColor: "var(--background-base)", baseColor: "var(--background-base-hover)" })) : (jsxRuntimeExports.jsx("table", { ...props })),
        }, classNames: {
            caption_label: styles.caption_label,
            button_previous: `${styles.nav_button} ${styles.nav_button_previous}`,
            button_next: `${styles.nav_button} ${styles.nav_button_next}`,
            month_caption: styles.month_caption,
            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.day_button,
            range_middle: styles.range_middle,
            range_end: styles.range_end,
            range_start: styles.range_start,
            hidden: styles.hidden,
            dropdowns: styles.dropdowns,
            ...classNames,
        }, className: root({ className }), mode: "single", ...props }));
};

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