import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import classNames from '../../_virtual/index.js';
import Select from '../Select/Select.js';
import Typography from '../Typography/Typography.js';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty.js';

const InputWithDropdown = forwardRef(({ name = '', label, value, disabled = false, required = false, placeholder, error, helperText, optionsList, selectedOption = { label: '', value: '' }, autoComplete = 'off', onDropdownChangeHandler = () => { }, onInputChangeHandler, onInputBlurHandler, onClick, onKeyUp, onKeyDown = () => { }, onFocus, optionsRequired = true, dropdownPosition = 'right', type = 'text', leftDropDownPositionZindex, rightDropDownPositionZindex, pattern, inputMode, disableSelectHover = false, inputRefWithDropdown, autoFocus = false, }, ref) => {
    const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
    const handleWheel = (e) => {
        if (type !== 'number')
            return;
        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 handleOnKeyDown = (e) => {
        const { type, value } = e.currentTarget;
        const parsedValue = parseInt(value);
        if (type === 'number') {
            if (['Subtract', '-'].includes(e.key) ||
                (e.key === 'ArrowDown' && (parsedValue <= 0 || isNaN(parsedValue)))) {
                e.preventDefault();
            }
        }
        onKeyDown?.(e);
    };
    return (jsxs("div", { className: classNames('ff-input-with-dropdown-container', {
            'ff-input-with-dropdown-container--filled': isValueFilled,
        }), children: [jsxs("fieldset", { className: classNames('ff-input-with-dropdown', {
                    'ff-input-with-dropdown--filled': isValueFilled,
                    'ff-input-with-dropdown--no-hover': isValueFilled,
                    'ff-input-with-dropdown--disabled': !!disabled,
                    'ff-input-with-dropdown--error': !!error,
                    [`ff-input-with-dropdown--${dropdownPosition}`]: dropdownPosition,
                }), children: [dropdownPosition === 'left' && (jsxs(Fragment, { children: [jsx(Select, { optionsList: optionsList, selectedOption: selectedOption, showLabel: false, showBorder: false, onChange: onDropdownChangeHandler, disabled: disabled || !optionsRequired, optionZIndex: leftDropDownPositionZindex, optionsRequired: optionsRequired, className: classNames('ff-floating-dropdown', {
                                    'ff-floating-dropdown--disabled': !!disabled,
                                    'ff-floating-dropdown--error': !!error,
                                    'ff-floating-dropdown--left': dropdownPosition === 'left',
                                    'ff-floating-dropdown--no-hover': disableSelectHover,
                                }), width: 94, height: 30, dropDownRef: inputRefWithDropdown }), jsx("div", { className: "seperatorline" })] })), jsxs("div", { className: classNames('ff-floating-label-input-container'), children: [jsx(Typography, { as: "label", htmlFor: name, className: classNames('ff-floating-label', {
                                    'ff-floating-label--filled': isValueFilled,
                                    'ff-floating-label--no-hover': isValueFilled,
                                    'ff-floating-label--error': !!error,
                                }), required: required, children: label }), jsx("input", { ref: ref, name: name, type: type, id: name, value: value, onChange: onInputChangeHandler, onBlur: onInputBlurHandler, placeholder: placeholder, autoComplete: autoComplete, required: required, disabled: disabled, onClick: onClick, onKeyUp: onKeyUp, onKeyDown: handleOnKeyDown, onWheel: handleWheel, onFocus: onFocus, className: classNames('ff-floating-input', {
                                    'ff-floating-input--filled': isValueFilled,
                                    'ff-floating-input--disabled': !!disabled,
                                    'ff-floating-input--error': !!error,
                                    'ff-floating-input--left-dropdown': dropdownPosition === 'left',
                                    'ff-floating-input--right-dropdown': dropdownPosition === 'right',
                                }), inputMode: inputMode, pattern: pattern, autoFocus: autoFocus })] }), dropdownPosition === 'right' && (jsx(Select, { optionsList: optionsList, selectedOption: selectedOption, showLabel: false, showBorder: false, optionZIndex: rightDropDownPositionZindex, onChange: onDropdownChangeHandler, disabled: disabled || !optionsRequired, optionsRequired: optionsRequired, className: classNames('ff-floating-dropdown', {
                            'ff-floating-dropdown--disabled': !!disabled,
                            'ff-floating-dropdown--error': !!error,
                            'ff-floating-dropdown--no-hover': disableSelectHover,
                        }), width: 120, height: 30, dropDownRef: inputRefWithDropdown }))] }), error && helperText && (jsx("span", { className: classNames('ff-helper-text', {
                    'ff-helper-text-left': dropdownPosition === 'left',
                }), children: helperText }))] }));
});

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