import { jsx, jsxs } from 'react/jsx-runtime';
import { useContext } from 'react';
import { CheckIcon } from '@heroicons/react/24/outline';
import { DateRangePickerContext } from './DateRangePicker.js';
import { cn } from '../../../utils/cn.js';

/**
 * DateRangePicker Presets Component — shows preset buttons with checkmarks
 */
const DateRangePickerPresets = ({ presets, className, tempRange, setTempRange, onPresetSelect, }) => {
    const context = useContext(DateRangePickerContext);
    if (!context) {
        throw new Error("DateRangePickerPresets must be used within a DateRangePicker");
    }
    const { theme } = context;
    const isSameDate = (d1, d2) => {
        if (!d1 || !d2)
            return d1 === d2;
        return (d1.getFullYear() === d2.getFullYear() &&
            d1.getMonth() === d2.getMonth() &&
            d1.getDate() === d2.getDate());
    };
    const isPresetActive = (preset) => {
        if (!tempRange)
            return false;
        const presetRange = preset.getValue();
        return (isSameDate(tempRange.start, presetRange.start) &&
            isSameDate(tempRange.end, presetRange.end));
    };
    const handlePresetClick = (preset) => {
        const range = preset.getValue();
        setTempRange === null || setTempRange === void 0 ? void 0 : setTempRange(range);
        onPresetSelect === null || onPresetSelect === void 0 ? void 0 : onPresetSelect(range);
    };
    return (jsx("div", { className: cn(theme.presetsContainerStyle, className), children: presets.map((preset, index) => {
            const active = isPresetActive(preset);
            return (jsxs("button", { type: "button", onClick: () => handlePresetClick(preset), className: theme.presetButtonStyle, "data-active": active, children: [jsx("span", { children: preset.label }), active && jsx(CheckIcon, { className: theme.presetCheckmarkStyle })] }, index));
        }) }));
};

export { DateRangePickerPresets };
