/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-127afd4
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { mergeRefs } from '@react-aria/utils';
import React, { cloneElement, useRef } from 'react';
import { useFocusRing } from 'react-aria';
import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty/index.js';
import { mergeProps } from '../../../utils/react/index.js';
import { InvalidIcon } from '../../shared/InvalidIcon.js';
import { ValidIcon } from '../../shared/ValidIcon.js';
import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../TextInput/TextInputBase.js';
const DateInputWrapperElement = tasty({
    qa: 'DateInputWrapper',
    role: 'presentation',
    styles: {
        ...INPUT_WRAPPER_STYLES,
        display: 'flex',
    },
});
const DateInputElement = tasty({
    role: 'presentation',
    styles: {
        ...DEFAULT_INPUT_STYLES,
        height: {
            '': '($size-md - 2bw)',
            'size=small': '($size-sm - 2bw)',
            'size=large': '($size-lg - 2bw)',
        },
        display: 'flex',
        flow: 'row',
        placeItems: 'center start',
    },
});
function DateInputBase(props, ref) {
    let inputRef = useRef(null);
    let { qa, inputType, isDisabled, inputStyles, children, fieldProps, style, disableFocusRing, autoFocus, validationState, isLoading, size = 'medium', suffix, } = props;
    let styles = extractStyles(props, CONTAINER_STYLES);
    let { focusProps, isFocused } = useFocusRing({
        isTextInput: true,
        within: true,
        autoFocus,
    });
    let isInvalid = validationState === 'invalid';
    let validationIcon = isInvalid ? InvalidIcon : ValidIcon;
    let validation = cloneElement(validationIcon);
    return (_jsxs(DateInputWrapperElement, { qa: qa || 'DateTimeInput', styles: styles, "data-size": size, "data-input-type": inputType ? inputType : 'datetimeinput', mods: {
            disabled: isDisabled,
            focused: isFocused && !disableFocusRing,
            invalid: isInvalid,
            suffix: (validationState && !isLoading) || isLoading || !!suffix,
        }, ...mergeProps(fieldProps ?? {}, focusProps), style: style, children: [_jsx("div", { "data-element": "Contents", role: "presentation", children: _jsx(DateInputElement, { ref: mergeRefs(ref, inputRef), "data-size": size, role: "presentation", styles: inputStyles, children: children }) }), (validationState && !isLoading) || isLoading || suffix ? (_jsxs("div", { "data-element": "Suffix", children: [(validationState && !isLoading) || isLoading ? (_jsx("div", { "data-element": "State", children: validationState && !isLoading ? validation : null })) : null, suffix] })) : null] }));
}
const _DateInputBase = React.forwardRef(DateInputBase);
_DateInputBase.displayName = 'DateInputBase';
export { _DateInputBase as DateInputBase };

        