import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, Fragment, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
import { useOneUIConfig } from "../../context/OneUIProvider";
import Text from "../Text";
import Styles from "./Input.module.scss";
import AdaptiveContainer from "../AdaptiveContainer";
function _Input({ error, placeholder = " ", hideError, icon, Icon, autoFocus, disclaimer, multiline, decoration = null, containerProps, className: localClassName, ...otherProps }, ref) {
    const className = useOneUIConfig("component.input.className", {});
    const variants = useOneUIConfig("component.input.labelVariants", {});
    const [focused, setFocused] = useState(false);
    const inputRef = useRef(null);
    useImperativeHandle(ref, () => inputRef.current, []);
    const shouldShowError = useMemo(() => {
        if (hideError === "onfocus")
            return !focused;
        return !!error;
    }, [focused, error, hideError]);
    useEffect(() => {
        if (autoFocus) {
            const t = setTimeout(() => {
                inputRef.current.focus();
            }, 500);
            return () => clearTimeout(t);
        }
    }, [autoFocus]);
    const Component = multiline ? "textarea" : "input";
    const containerRef = useRef(null);
    const maxWidth = useMemo(() => containerRef.current?.getBoundingClientRect().width, [error, disclaimer]);
    return (_jsxs("div", { className: `${className.container} ${localClassName}`, children: [_jsxs("div", { className: `${Styles.inputContainer} ${false ? Styles.withIcon : ""}`, ref: containerRef, ...containerProps, children: [decoration, _jsx(Component, { ref: inputRef, placeholder: placeholder, rows: multiline, className: className.input, ...otherProps, onFocus: (e) => {
                            setFocused(true);
                            if (otherProps.onFocus)
                                otherProps.onFocus(e);
                        }, onBlur: (e) => {
                            setFocused(false);
                            if (otherProps.onBlur)
                                otherProps.onBlur(e);
                        } }), Icon && _jsx("div", { className: Styles.icon, children: Icon }), icon && _jsx("img", { className: Styles.icon, ...icon })] }), _jsx(AdaptiveContainer, { direction: "v", style: { maxWidth: maxWidth }, children: error && shouldShowError ? (_jsx(Text, { title: typeof error === "string" ? error : "", type: variants.error ?? "error", children: error }, "error")) : disclaimer ? (_jsx(Text, { title: typeof disclaimer === "string" ? disclaimer : "", type: variants.disclaimer ?? "caption", children: disclaimer }, "t")) : (_jsx(Fragment, {}, "e")) })] }));
}
/**
 * A transparent input with some prebuilt states common to the application
 **/
/**
 * A simple text input component that users can type into.
 * It supports both single-line and multi-line text entry,
 * displays error messages when needed, and can show icons or
 * custom decorations next to the input field.
 */
const Input = forwardRef(_Input);
export default Input;
//# sourceMappingURL=Input.js.map