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

/**
 * DateRangePicker Trigger Component — styled like form input
 */
const DateRangePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md", className, onClick, onFocus, onBlur, children, }) => {
    var _a, _b, _c, _d;
    const context = useContext(DateRangePickerContext);
    if (!context) {
        throw new Error("DateRangePickerTrigger must be used within a DateRangePicker");
    }
    const { theme, triggerRef } = context;
    const baseStyle = theme.baseStyle || "";
    const sizeStyle = ((_a = theme.triggerSizes) === null || _a === void 0 ? void 0 : _a[size]) || "";
    const stateStyle = ((_b = theme.triggerStates) === null || _b === void 0 ? void 0 : _b[state]) || "";
    const hoverStateStyle = ((_c = theme.triggerHoverStates) === null || _c === void 0 ? void 0 : _c[state]) || "";
    const focusStateStyle = ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "";
    const iconEndStyle = theme.iconEndStyle || "";
    const iconEndPadding = theme.iconEndPadding || "";
    const triggerButtonStyle = theme.triggerButtonStyle || "";
    const activeFocusState = isOpen
        ? focusStateStyle ||
            "outline-2 outline-primary-600 -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
        : "";
    return (jsx("div", { className: "relative w-full", children: jsxs("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, triggerButtonStyle, "text-left", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open date range picker", children: [children, jsx("span", { className: iconEndStyle, children: jsx(CalendarIcon, { className: "h-4 w-4" }) })] }) }));
};

export { DateRangePickerTrigger };
