import React__default, { useRef, useState, useEffect, forwardRef } from 'react';
import { o as omit } from '../omit-es.js';
import { k as FormField } from '../FormField-es.js';
import 'classnames';
import '../tslib.es6-es.js';
import 'react-hook-form';
import '@jobber/hooks';
import 'framer-motion';
import '@jobber/design';
import '../Button-es.js';
import { D as DatePicker } from '../DatePicker-es.js';
import { InputText } from '../InputText/index.mjs';
import '../_commonjsHelpers-es.js';
import '../_getAllKeys-es.js';
import '../isTypedArray-es.js';
import '../isObjectLike-es.js';
import '../isSymbol-es.js';
import '../identity-es.js';
import '../_getTag-es.js';
import '../keysIn-es.js';
import '../_baseAssignValue-es.js';
import '../_baseFlatten-es.js';
import '../_setToString-es.js';
import '../Icon-es.js';
import '../Text-es.js';
import '../Typography-es.js';
import '../useFormFieldFocus-es.js';
import '../InputValidation-es.js';
import '../Spinner-es.js';
import 'react-router-dom';
import '../clsx-es.js';
import '../floating-ui.react-es.js';
import '../floating-ui.react-dom-es.js';
import 'react-dom';
import 'react/jsx-runtime';
import '../AtlantisContext-es.js';
import '../filterDataAttributes-es.js';

// eslint-disable-next-line import/no-deprecated
function InputDate$1(inputProps) {
    const formFieldActionsRef = useRef(null);
    return (React__default.createElement(DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
            const { onChange, onClick, value } = activatorProps;
            const newActivatorProps = omit(activatorProps, ["activator"]);
            const [isFocused, setIsFocused] = useState(false);
            const suffix = inputProps.showIcon !== false
                ? {
                    icon: "calendar",
                    ariaLabel: "Show calendar",
                    onClick: !inputProps.disabled && onClick && onClick,
                }
                : undefined;
            // Set form field to formatted date string immediately, to avoid validations
            //  triggering incorrectly when it blurs (to handle the datepicker UI click)
            useEffect(() => {
                var _a;
                value && ((_a = formFieldActionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value));
            }, [value]);
            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__default.createElement("div", { onClick: onClick },
                React__default.createElement(FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyValueLabel ? inputProps.emptyValueLabel || "" : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
                        onChange && onChange(event);
                    }, onBlur: () => {
                        inputProps.onBlur && inputProps.onBlur();
                        activatorProps.onBlur && activatorProps.onBlur();
                        setIsFocused(false);
                    }, onFocus: () => {
                        inputProps.onFocus && inputProps.onFocus();
                        activatorProps.onFocus && activatorProps.onFocus();
                        setIsFocused(true);
                    }, onKeyUp: event => {
                        var _a;
                        if (inputProps.showIcon === false &&
                            event.key === "ArrowDown") {
                            (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
                        }
                    }, actionsRef: formFieldActionsRef, suffix: suffix }))));
        } }));
}

function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
    const [isFocused, setIsFocused] = 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 InputDateRebuilt = forwardRef((props, forwardedRef) => {
    const { onChange } = props;
    const isCalendarOpenRef = useRef(false);
    const inputFocusedRef = useRef(false);
    const compositeFocusedRef = useRef(false);
    const lastBlurEventRef = useRef(null);
    return (React__default.createElement(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__default.createElement("div", { onClick: onClick },
            React__default.createElement(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, version: 2, 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 })));
    }
});
InputDateRebuilt.displayName = "InputDateRebuilt";

function isNewInputDateProps(props) {
    return props.version === 2;
}
const InputDate = forwardRef(function InputDateShim(props, ref) {
    if (isNewInputDateProps(props)) {
        return React__default.createElement(InputDateRebuilt, Object.assign({}, props, { ref: ref }));
    }
    else {
        return React__default.createElement(InputDate$1, Object.assign({}, props));
    }
});

export { InputDate };
