'use strict';

var React = require('react');
var omit = require('../omit-cjs.js');
var FormField = require('../FormField-cjs.js');
require('classnames');
require('../tslib.es6-cjs.js');
require('react-hook-form');
require('@jobber/hooks');
require('framer-motion');
require('@jobber/design');
require('../Button-cjs.js');
var DatePicker = require('../DatePicker-cjs.js');
var InputText_index = require('../InputText/index.cjs');
require('../_commonjsHelpers-cjs.js');
require('../_getAllKeys-cjs.js');
require('../isTypedArray-cjs.js');
require('../isObjectLike-cjs.js');
require('../isSymbol-cjs.js');
require('../identity-cjs.js');
require('../_getTag-cjs.js');
require('../keysIn-cjs.js');
require('../_baseAssignValue-cjs.js');
require('../_baseFlatten-cjs.js');
require('../_setToString-cjs.js');
require('../Icon-cjs.js');
require('../Text-cjs.js');
require('../Typography-cjs.js');
require('../useFormFieldFocus-cjs.js');
require('../InputValidation-cjs.js');
require('../Spinner-cjs.js');
require('react-router-dom');
require('../clsx-cjs.js');
require('../floating-ui.react-cjs.js');
require('react/jsx-runtime');
require('react-dom');
require('../AtlantisContext-cjs.js');
require('../filterDataAttributes-cjs.js');

function InputDate$1(inputProps) {
    const formFieldActionsRef = React.useRef(null);
    return (React.createElement(DatePicker.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.omit(activatorProps, ["activator"]);
            const [isFocused, setIsFocused] = React.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)
            React.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.createElement("div", { onClick: onClick },
                React.createElement(FormField.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] = 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 InputDateRebuilt = 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_index.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, 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 = React.forwardRef(function InputDateShim(props, ref) {
    if (isNewInputDateProps(props)) {
        return React.createElement(InputDateRebuilt, Object.assign({}, props, { ref: ref }));
    }
    else {
        return React.createElement(InputDate$1, Object.assign({}, props));
    }
});

exports.InputDate = InputDate;
