import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import React__default, { createContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
import { dateRangePickerTheme } from './DateRangePicker.theme.js';
import { DEFAULT_DATE_RANGE_PRESETS } from './dateRangePresets.js';
import { FormLabel } from '../FormLabel/FormLabel.js';
import { DateRangePickerTrigger } from './DateRangePickerTrigger.js';
import { DateRangePickerBody } from './DateRangePickerBody.js';
import { DateRangePickerPresets } from './DateRangePickerPresets.js';
import { cn } from '../../../utils/cn.js';
import { formatDateCustom } from '../../../utils/dateUtils.js';

const DateRangePickerContext = createContext(undefined);
/**
 * Format date for display
 */
const formatDate = (date, formatString, options = {
    year: "numeric",
    month: "short",
    day: "numeric",
}) => {
    if (formatString) {
        return formatDateCustom(date, formatString);
    }
    return date.toLocaleDateString(undefined, options);
};
/**
 * Format date range for display
 */
const formatDateRange = (range, formatString, options) => {
    if (!range.start && !range.end)
        return "";
    if (range.start && !range.end)
        return formatDate(range.start, formatString, options);
    if (!range.start && range.end)
        return formatDate(range.end, formatString, options);
    return `${formatDate(range.start, formatString, options)} - ${formatDate(range.end, formatString, options)}`;
};
/**
 * DateRangePicker Component — dedicated range picker with presets and dual calendars
 */
const DateRangePickerComponent = React__default.forwardRef(({ id, name, size = "md", state = "default", value, defaultValue, placeholder = "Select date range...", disabled = false, required = false, label, helperText, onChange, onFocus, onBlur, presets = DEFAULT_DATE_RANGE_PRESETS, showPresets = true, minDate, maxDate, isDateDisabled, showToday = true, weekdays, months, dateFormat, formatString, yearRange, className = "", wrapperClassName = "", portal = true, placement = "bottom-start", offset = 4, ...rest }, ref) => {
    var _a, _b;
    const theme = { ...dateRangePickerTheme };
    const [isOpen, setIsOpen] = useState(false);
    const [selectedRange, setSelectedRange] = useState(value || defaultValue);
    const triggerRef = useRef(null);
    const contentRef = useRef(null);
    // Sync controlled value
    useEffect(() => {
        if (value !== undefined) {
            setSelectedRange(value);
        }
    }, [value]);
    const handleRangeSelect = useCallback((newRange) => {
        setSelectedRange(newRange);
        onChange === null || onChange === void 0 ? void 0 : onChange(newRange);
    }, [onChange]);
    const handleButtonClick = useCallback(() => {
        if (!disabled) {
            setIsOpen((prev) => !prev);
        }
    }, [disabled]);
    const displayValue = selectedRange
        ? formatDateRange(selectedRange, formatString, dateFormat)
        : placeholder;
    const generatedId = React__default.useId();
    const pickerId = id || generatedId;
    return (jsx(DateRangePickerContext.Provider, { value: useMemo(() => ({
            isOpen,
            setIsOpen,
            selectedRange,
            handleRangeSelect,
            minDate,
            maxDate,
            isDateDisabled,
            showToday,
            weekdays,
            months,
            yearRange,
            size,
            state,
            theme,
            triggerRef,
            contentRef,
        }), [
            isOpen,
            selectedRange,
            handleRangeSelect,
            minDate,
            maxDate,
            isDateDisabled,
            showToday,
            weekdays,
            months,
            yearRange,
            size,
            state,
            theme,
        ]), children: jsxs("div", { ref: ref, className: cn(theme.containerStyle, wrapperClassName), ...rest, children: [label && (jsx(FormLabel, { htmlFor: pickerId, required: required, children: label })), jsx(DateRangePickerTrigger, { id: pickerId, disabled: disabled, isOpen: isOpen, state: state, size: size, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, children: jsx("span", { className: cn("block truncate", selectedRange && (selectedRange.start || selectedRange.end)
                            ? theme.valueTextStyle
                            : theme.placeholderTextStyle), children: displayValue }) }), jsx(DateRangePickerBody, { isOpen: isOpen, onClose: () => setIsOpen(false), portal: portal, placement: placement, offset: offset, presets: presets, showPresets: showPresets }), helperText && (jsx("p", { className: cn(theme.helperTextStyle, theme.helperTextStates[state]), children: helperText })), name && selectedRange && (jsxs(Fragment, { children: [jsx("input", { type: "hidden", name: `${name}[start]`, value: ((_a = selectedRange.start) === null || _a === void 0 ? void 0 : _a.toISOString()) || "" }), jsx("input", { type: "hidden", name: `${name}[end]`, value: ((_b = selectedRange.end) === null || _b === void 0 ? void 0 : _b.toISOString()) || "" })] }))] }) }));
});
DateRangePickerComponent.displayName = "DateRangePicker";
// Compound component
const DateRangePickerWithCompounds = DateRangePickerComponent;
DateRangePickerWithCompounds.Trigger = DateRangePickerTrigger;
DateRangePickerWithCompounds.Body = DateRangePickerBody;
DateRangePickerWithCompounds.Presets = DateRangePickerPresets;

export { DateRangePickerWithCompounds as DateRangePicker, DateRangePickerBody, DateRangePickerContext, DateRangePickerPresets, DateRangePickerTrigger };
