import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// @ts-nocheck
import { useRef } from 'react';
import { DebounceInput } from 'react-debounce-input';
import { Checkbox } from '../checkbox/Checkbox.component';
import { Icon } from '../icon/Icon.component';
import { Select } from '../select/Select.component';
import { TextArea } from '../textarea/TextArea.component';
import { InputContainer, LabelStyle, InputErrorMessage, InputWrapper, } from './Input.component.style';
const InputRenderer = ({ type, id, value, checked, onChange, options = [], min, max, ...rest }) => {
    const inputEl = useRef(null);
    const handleNumberClick = (e) => {
        /*
         ** Since react is using Synthetic event we have to do the following to be
         ** able to programmatically dispatch the onChange event from the input
         */
        const valuePropDescriptor = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
        if (valuePropDescriptor && inputEl.current) {
            const nativeInputValueSetter = valuePropDescriptor.set;
            if (nativeInputValueSetter) {
                if (e.target.dataset.core === 'up')
                    nativeInputValueSetter.call(inputEl.current, max
                        ? max && parseInt(value) + 1 <= parseInt(max)
                            ? parseInt(value) + 1
                            : parseInt(value)
                        : parseInt(value) + 1);
                else
                    nativeInputValueSetter.call(inputEl.current, min
                        ? min && parseInt(value) - 1 >= parseInt(min)
                            ? parseInt(value) - 1
                            : parseInt(value)
                        : parseInt(value) - 1);
            }
            const event = new Event('input', {
                bubbles: true,
            });
            inputEl.current.dispatchEvent(event);
        }
    };
    const input = {
        select: (_jsx(Select, { id: id, value: value, onChange: onChange, options: options, ...rest })),
        checkbox: (_jsx(Checkbox, { id: id, value: value, checked: !!checked, onChange: onChange, ...rest })),
        textarea: _jsx(TextArea, { id: id, value: value, onChange: onChange, ...rest }),
        number: (_jsxs("div", { className: "sc-number-input-wrapper", children: [_jsx("input", { className: "sc-input-type sc-number-input", type: "number", id: id, value: value, onChange: onChange, ref: inputEl, min: min, max: max, ...rest }), _jsxs("div", { className: "carets-wrapper", children: [_jsx(Icon, { name: "Dropdown-up", "data-core": "up", onClick: handleNumberClick }), _jsx(Icon, { name: "Dropdown-down", "data-core": "down", onClick: handleNumberClick })] })] })),
        text: (_jsx(DebounceInput, { className: "sc-input-type", minLength: 1, debounceTimeout: 300, id: id, value: value, onChange: onChange, autoComplete: "off", ...rest })),
    };
    if (type)
        return input[type];
    else
        return input.text;
};
const Input = ({ label, id, error, type, disabled, ...rest }) => {
    return (_jsxs(InputContainer, { className: "sc-input", disabled: disabled, error: error, type: type, children: [label && (_jsx(LabelStyle, { htmlFor: id, className: "sc-input-label", children: label })), _jsxs(InputWrapper, { className: "sc-input-wrapper", children: [_jsx(InputRenderer, { id: id, type: type, disabled: disabled, ...rest }), error && (_jsx(InputErrorMessage, { className: "sc-input-error", children: error }))] })] }));
};
export { Input };
