import React, { useMemo, useImperativeHandle, useRef, forwardRef, useId, } from "react";
import { Label } from "../Label";
import { Button } from "../Button";
import * as styles from "./styles";
import CloseIcon from "~/components/deprecated/assets/close.svg";
export const Input = forwardRef(({ name, value, label, placeholder, className, autofocus = false, hasError = false, adornment, onBlur, onFocus, onClear, onChange, }, ref) => {
    const inputId = useId();
    const inputRef = useRef(null);
    const inputContainerRef = useRef(null);
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    useImperativeHandle(ref, () => ({
        focus: () => {
            var _a;
            (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
        },
        get input() {
            return inputRef.current;
        },
        get container() {
            return inputContainerRef.current;
        },
    }));
    const renderLabel = useMemo(() => {
        if (!label) {
            return null;
        }
        return (React.createElement(Label, { htmlFor: inputId, style: { lineHeight: "26px" } }, label));
    }, [label]);
    return (React.createElement("div", { className: styles.container, ref: inputContainerRef },
        renderLabel,
        React.createElement("div", { className: styles.innerContainer, "data-has-error": hasError },
            adornment && React.createElement("span", { className: styles.adornment }, adornment),
            React.createElement("input", { type: "text", className: `${className} ${styles.input}`, ref: inputRef, name: name, autoFocus: autofocus, id: inputId, value: value, onBlur: onBlur, onFocus: onFocus, onChange: onChange, placeholder: placeholder, style: adornment && { width: "-webkit-fill-available" } }),
            onClear && (React.createElement(Button, { size: "small", variant: "text", onClick: onClear },
                React.createElement(CloseIcon, null))))));
});
Input.displayName = "Input";
//# sourceMappingURL=index.js.map