import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef, useState, useEffect } from 'react';
import classNames from '../../_virtual/index.js';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty.js';
import Icon from '../Icon/Icon.js';
import Tooltip from '../Tooltip/Tooltip.js';

const Input = forwardRef(({ type = 'text', variant = 'primary', name = '', label, disabled = false, required = false, placeholder = 'Enter input', value = type === 'number' ? 0 : '', helperText = '', isHelperTextRequired = false, error, noBorder, className = '', onChange, onBlur, onFocus, autoComplete = 'off', autoFocus = false, minValue = -Infinity, maxValue = Infinity, transparentBackground = false, size = 'small', isLabelRequired = true, onClick, onKeyUp, reserveHelperTextSpace = false, setUpdatedNumberValue = () => { }, displayErrorImmediately = true, showSearchIcon = false, searchIconProps, handleSearchIconClick, readOnly = false, adjustToValidRange = true, disableAfterMaxValueReached = false, pattern, background, helperTextWidth, fixedLabel = false, iconProps = {
    isShowIcon: false,
    iconName: '',
    iconToolTipTitle: '',
    isIconDisable: false,
    isClearIcon: false,
    iconColor: '',
    onIconClick: () => { },
}, ...props }, ref) => {
    const isValueFilled = !checkEmpty(value) ||
        (type === 'password' && value?.length > 0) ||
        value !== '';
    const isTypeNumber = type === 'number';
    const numericMin = minValue !== undefined ? parseInt(minValue, 10) || 0 : 0;
    const numericMax = maxValue !== undefined
        ? parseInt(maxValue, 10) || Infinity
        : Infinity;
    const [internalValue, setInternalValue] = useState(value);
    const [touched, setTouched] = useState(false);
    const [isFocused, setIsFocused] = useState(false);
    const clearIcon = iconProps?.isClearIcon;
    const showIcon = iconProps?.isShowIcon;
    useEffect(() => {
        if (value !== internalValue) {
            setInternalValue(value);
        }
    }, [value]);
    const handleIncrementDecrement = (action) => {
        const parsedValue = parseInt(internalValue.toString(), 10) || 0;
        let updatedValue = parsedValue;
        if (action === 'increment') {
            updatedValue = Math.min(parsedValue + 1, numericMax);
        }
        else if (action === 'decrement') {
            updatedValue = Math.max(parsedValue - 1, numericMin);
        }
        setInternalValue(updatedValue);
        setUpdatedNumberValue(updatedValue);
        if (onChange) {
            const syntheticEvent = {
                target: { value: updatedValue.toString(), name },
                currentTarget: { value: updatedValue.toString(), name },
            };
            onChange(syntheticEvent);
        }
    };
    const handleKeyDown = (e) => {
        if (type === 'number') {
            const invalidKeys = ['e', 'E', '+', '-'];
            if (invalidKeys.includes(e.key)) {
                e.preventDefault();
            }
        }
    };
    const handleChange = (e) => {
        let newValue = e.target.value;
        if (type === 'number') {
            if (newValue === '' || newValue === '-') {
                setInternalValue(newValue);
                setUpdatedNumberValue(newValue);
                onChange?.(e);
                return;
            }
            const parsedValue = Number(newValue);
            if (disableAfterMaxValueReached && parsedValue > numericMax) {
                return;
            }
            if (!isNaN(parsedValue)) {
                setInternalValue(parsedValue);
                setUpdatedNumberValue(parsedValue);
                onChange?.(e);
            }
        }
        else {
            setInternalValue(newValue);
            onChange?.(e);
        }
    };
    const handleFocus = (e) => {
        setIsFocused(true);
        if (!displayErrorImmediately) {
            setTouched(false);
        }
        onFocus?.(e);
    };
    const handleBlur = (e) => {
        setIsFocused(false);
        if (!displayErrorImmediately) {
            setTouched(true);
        }
        if (type === 'number' && adjustToValidRange === true) {
            let parsedValue = Number(internalValue);
            if (internalValue === '' || internalValue === '-') {
                parsedValue = minValue;
            }
            if (isNaN(parsedValue) ||
                parsedValue < numericMin ||
                parsedValue > numericMax) {
                const correctedValue = Math.max(numericMin, Math.min(parsedValue, numericMax));
                setInternalValue(correctedValue);
                setUpdatedNumberValue(correctedValue);
                const syntheticEvent = {
                    target: { value: correctedValue.toString(), name },
                    currentTarget: { value: correctedValue.toString(), name },
                };
                onChange?.(syntheticEvent);
            }
        }
        onBlur?.(e);
    };
    const handleWheel = (e) => {
        if (type === 'number') {
            const input = e.currentTarget;
            const currentValue = parseFloat(input.value);
            const isScrollDown = e.deltaY > 0;
            if (!isNaN(currentValue) && currentValue <= 0 && isScrollDown) {
                input.blur();
                setTimeout(() => input.focus(), 0);
            }
        }
    };
    const handleClearValue = () => {
        setInternalValue('');
        if (onChange) {
            const syntheticEvent = {
                target: { value: '', name },
                currentTarget: { value: '', name },
            };
            onChange(syntheticEvent);
        }
    };
    return (jsx("fieldset", { className: classNames('ff-input-fieldset', {
            'ff-input-fieldset--disabled': disabled,
        }), children: jsxs("div", { className: classNames('ff-input-container', {
                'ff-input-container--float': isValueFilled || fixedLabel,
                'ff-input-container--disabled': !!disabled,
            }), children: [isLabelRequired && (jsxs("label", { className: classNames(`ff-input-label-container ff-input-label-container--${size}`, {
                        'ff-input-label-container--danger': (displayErrorImmediately || touched) && !!error,
                    }), htmlFor: name, children: [required && jsx("span", { className: "required-asterisk", children: "*" }), jsx("span", { className: classNames(`ff-input-label ff-input-label--${variant}`, {
                                'ff-input-label--no-hover': !!internalValue,
                                'ff-input-label--disabled': !!disabled,
                                'ff-input-label--danger': (displayErrorImmediately || touched) && !!error,
                                'ff-input-label--focused': isFocused,
                            }), children: label })] })), jsx("input", { style: { background: background || 'transparent' }, readOnly: readOnly, ref: ref, name: name, value: internalValue || value, type: type, spellCheck: false, id: name, className: classNames(`ff-input ff-input-${variant} default-input ff-input--${size}`, {
                        ['ff-input--transparentBackground']: !!transparentBackground,
                        'ff-input--disabled': !!disabled,
                        'ff-input--danger': (displayErrorImmediately || touched) && !!error,
                        'ff-input--no-border': !!noBorder,
                        'ff-input--placeholder': !isLabelRequired || fixedLabel,
                        'ff-input--number': isTypeNumber,
                        'ff-input--focused': isFocused,
                        'ff-input--isSearchIcon': showSearchIcon,
                        'ff-input--isShowIcon': showIcon,
                        'ff-input--isClearIcon': clearIcon && showIcon,
                        'ff-input--isOnly-clear-icon': !showIcon && clearIcon,
                    }, `${className}`), placeholder: placeholder, disabled: disabled, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, autoComplete: autoComplete, autoFocus: autoFocus, min: minValue, max: maxValue, onClick: onClick, onKeyUp: onKeyUp, onKeyDown: handleKeyDown, onWheel: handleWheel, ...props }), type === 'number' && (jsxs("div", { className: classNames('arrow-container', {
                        ['arrow-container-label']: label,
                        ['arrow-container-label-error']: !!error && (label || required),
                        ['arrow-container-no-label-error']: !!error && !label,
                    }), children: [jsx(Icon, { name: "arrow_up", hoverEffect: false, height: 7, width: 12, color: value == maxValue
                                ? 'var(--private-chip-bg-color)'
                                : 'var(--text-area-default-color)', onClick: () => {
                                if (disabled)
                                    return;
                                handleIncrementDecrement('increment');
                            }, disabled: disabled }), jsx(Icon, { name: "arrow_down", height: 7, width: 12, color: value == minValue
                                ? 'var(--private-chip-bg-color)'
                                : 'var(--text-area-default-color)', onClick: () => {
                                if (disabled)
                                    return;
                                handleIncrementDecrement('decrement');
                            }, disabled: disabled })] })), showSearchIcon && !(type === 'number') && (jsx("div", { className: classNames('arrow-container', {
                        ['arrow-container-searchIcon']: showSearchIcon,
                    }), children: jsx(Tooltip, { title: searchIconProps?.toolTipTitle || 'search', children: jsx(Icon, { name: searchIconProps?.name || 'search', hoverEffect: false, height: searchIconProps?.height || 14, width: searchIconProps?.height || 14, color: "var(--text-area-default-color)", onClick: (e) => {
                                if (handleSearchIconClick) {
                                    handleSearchIconClick(e);
                                }
                            }, disabled: searchIconProps?.disabled }) }) })), clearIcon && !(type === 'number') && !!internalValue && (jsx("div", { className: classNames('ff-input-clear-icon-container', {
                        ['ff-input-clear-icon-container--default']: clearIcon,
                        ['ff-input-clear-icon-container--error']: !!error,
                        ['ff-input-clear-icon-container--with-label']: (label || required) && clearIcon,
                        ['ff-input-clear-icon-container--no-label']: !label && clearIcon,
                        ['ff-input-clear-icon-container--isOnly-clear-icon']: !showIcon && clearIcon,
                    }), children: jsx(Tooltip, { title: clearIcon ? 'Clear' : '', children: jsx(Icon, { name: clearIcon ? 'close' : '', hoverEffect: false, height: 16, width: 16, color: "var(--brand-color)", onClick: handleClearValue, disabled: iconProps?.isIconDisable, cursorType: "pointer" }) }) })), showIcon && !(type === 'number') && (jsx("div", { className: classNames('ff-input-icon-container', {
                        ['ff-input-icon-container--default']: showIcon,
                        ['ff-input-icon-container--error']: !!error,
                        ['ff-input-icon-container--with-label']: (label || required) && showIcon,
                        ['ff-input-icon-container--no-label']: !label && showIcon,
                    }), children: jsx(Tooltip, { title: showIcon && !iconProps?.isIconDisable
                            ? iconProps?.iconToolTipTitle
                            : '', children: jsx(Icon, { name: iconProps?.iconName || '', hoverEffect: false, height: 16, width: 16, color: iconProps?.iconColor || 'var(--text-area-default-color)', onClick: (e) => {
                                if (iconProps?.onIconClick) {
                                    iconProps?.onIconClick(e);
                                }
                            }, disabled: iconProps?.isIconDisable, cursorType: "pointer" }) }) })), reserveHelperTextSpace && (jsx("span", { className: classNames('ff-input-message', {
                        'ff-input-message--space': !!reserveHelperTextSpace,
                        'ff-input-message--showHelperText': !!isHelperTextRequired,
                        'ff-input-message--danger': (displayErrorImmediately || touched) && !!error,
                    }), children: (displayErrorImmediately || touched) &&
                        (error || isHelperTextRequired)
                        ? helperText
                        : '' })), !reserveHelperTextSpace &&
                    (displayErrorImmediately || touched) &&
                    helperText &&
                    (error || isHelperTextRequired) && (jsx("span", { className: classNames(helperTextWidth ? 'ff-input-width' : 'ff-input-message', {
                        'ff-input-message--showHelperText': !!isHelperTextRequired,
                        'ff-input-message--danger': !!error,
                    }), style: {
                        width: typeof helperTextWidth === 'number'
                            ? `${helperTextWidth}px`
                            : helperTextWidth || '',
                    }, children: helperText }))] }) }));
});

export { Input as default };
//# sourceMappingURL=Input.js.map
