import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import '../resources.css';
const Textbox2 = (props) => {
    const [focussed, setFocussed] = useState(false);
    const inputRef = useRef(undefined);
    useEffect(() => {
        if (focussed) {
            inputRef.current.focus();
        }
    }, [focussed]);
    useEffect(() => {
        // console.log("Tbox Data",props.value,focussed);
        if (props.value && props.value?.length > 0 && !focussed) {
            setFocussed(true);
        }
    }, [props.value]);
    return (_jsxs("div", { onMouseEnter: () => props.eventHandler({ name: "mouse-enter", triggerBy: "textbox" }), onMouseLeave: () => props.eventHandler({ name: "mouse-leave", triggerBy: "textbox" }), className: "textbox2-wrapper", children: [_jsx("button", { className: "textbox2-placeholder-" + (focussed ? "focussed" : "blur"), onClick: () => { !focussed ? setFocussed(true) : null; }, children: _jsx("p", { className: "textbox2-placeholder-text-" + (focussed ? "focussed" : "blur"), children: props.title }) }), _jsx("input", { readOnly: props.readOnly, ref: inputRef, className: "textbox2-input", type: !props.type ? "text" : props.type, onChange: (e) => props.eventHandler({ name: "oninput", data: props.inputType == "int" ? parseInt(e.target.value.length == 0 ? "0" : e.target.value) : props.inputType == "float" ? parseFloat(e.target.value.length == 0 ? "0" : e.target.value) : e.target.value, triggerBy: "textbox" }), value: props.value ? props.value : "", onBlur: () => !(props.value && props.value?.length > 0) ? setFocussed(false) : null })] }));
};
export default Textbox2;
//# sourceMappingURL=Textbox2.js.map