'use strict';

var React = require('react');
var DatePicker = require('./DatePicker-cjs.js');
var InputText = require('./InputText-cjs.js');

function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
    const [isFocused, setIsFocused] = React.useState(false);
    function handleChange(_newValue, event) {
        onChange === null || onChange === void 0 ? void 0 : onChange(event);
    }
    function handleFocus(event) {
        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
        setIsFocused(true);
    }
    function handleBlur(event) {
        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
        setIsFocused(false);
    }
    return {
        handleBlur,
        handleChange,
        handleFocus,
        isFocused,
    };
}

const InputDate = React.forwardRef((props, forwardedRef) => {
    const { onChange } = props;
    const isCalendarOpenRef = React.useRef(false);
    const inputFocusedRef = React.useRef(false);
    const compositeFocusedRef = React.useRef(false);
    const lastBlurEventRef = React.useRef(null);
    return (React.createElement(DatePicker.DatePicker, { selected: props.value, onChange: newValue => {
            onChange(newValue);
        }, disabled: props.disabled, readonly: props.readOnly, fullWidth: !props.inline, minDate: props.minDate, maxDate: props.maxDate, smartAutofocus: false, activator: InputDateActivator, onOpenChange: open => {
            var _a;
            isCalendarOpenRef.current = open;
            // When calendar closes, fire onBlur if input is also not focused
            if (!open &&
                !inputFocusedRef.current &&
                compositeFocusedRef.current &&
                lastBlurEventRef.current) {
                compositeFocusedRef.current = false;
                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, lastBlurEventRef.current);
            }
        } }));
    function InputDateActivator(activatorProps) {
        const { onClick, value } = activatorProps;
        const { handleChange, handleFocus, handleBlur, isFocused } = useInputDateActivatorActions({
            onChange: activatorProps.onChange,
            onFocus: event => {
                var _a, _b;
                inputFocusedRef.current = true;
                // Fire parent's onFocus only when the composite component first receives focus
                if (!compositeFocusedRef.current) {
                    compositeFocusedRef.current = true;
                    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
                }
                (_b = activatorProps.onFocus) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
            },
            onBlur: event => {
                var _a, _b;
                inputFocusedRef.current = false;
                lastBlurEventRef.current = event;
                // Only fire parent's onBlur if calendar is also closed
                if (!isCalendarOpenRef.current && compositeFocusedRef.current) {
                    compositeFocusedRef.current = false;
                    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
                }
                (_b = activatorProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
            },
        });
        const suffix = props.showIcon !== false
            ? {
                icon: "calendar",
                ariaLabel: "Show calendar",
                onClick: !props.disabled && onClick && onClick,
            }
            : undefined;
        const showEmptyValueLabel = !value && !isFocused;
        return (
        // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
        React.createElement("div", { onClick: onClick },
            React.createElement(InputText.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
                    var _a, _b;
                    if (props.showIcon === false && event.key === "ArrowDown") {
                        (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
                    }
                    (_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, event);
                }, onChange: handleChange })));
    }
});
InputDate.displayName = "InputDate";

exports.InputDate = InputDate;
