import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import '../resources.css';
import { useEffect, useState } from "react";
import Textbox2 from "./Textbox2";
const Field = (props) => {
    const Fieldcomponent = props.componentInfo.component ? props.componentInfo.component : Textbox2;
    const [error, setError] = useState();
    const eventHandler = (event) => {
        props.eventHandler ? props.eventHandler(event) : null;
        switch (event.name) {
            case props.onUpdate?.event:
                (props.onUpdate?.handler && props.fields) ? props.onUpdate.handler(props.fields, event.data) : props.formHandler(props.id, event.data);
                break;
            case props.onFocus?.event:
                break;
        }
    };
    useEffect(() => {
        if (props.validation) {
            //console.log(props.id,props.value,props.validation(props.value))
            let res = props.validation(props.value);
            !res.success ? setError(res.message) : setError(undefined);
        }
    }, [props.value]);
    return (_jsxs("div", { className: props.classId + "-" + 'field-wrapper', children: [props.title
                ?
                    _jsx("div", { className: props.classId + "-" + 'field-title-wrapper', children: _jsx("p", { className: props.classId + "-" + 'field-title', children: props.title }) })
                :
                    null, _jsx("div", { className: props.classId + "-" + 'field-input-wrapper', children: props.mode == "read-only"
                    ?
                        _jsx("p", { className: "form-field-display-readonly", children: props.getDisplayValue ? props.getDisplayValue(props.value) : props.value })
                    :
                        _jsx(Fieldcomponent, { value: props.value, eventHandler: eventHandler, id: props.id, ...props.componentInfo.props }) }), error
                ?
                    _jsx("p", { className: "form-field-error", style: { display: error ? "flex" : "none" }, children: error })
                :
                    _jsx("p", { style: { margin: 0 } })] }));
};
export default Field;
//# sourceMappingURL=Field.js.map