"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const formik_1 = require("formik");
const React = tslib_1.__importStar(require("react"));
const pencil_alt_icon_1 = require("@patternfly/react-icons/dist/js/icons/pencil-alt-icon");
const InputField_1 = tslib_1.__importDefault(require("./InputField"));
const react_core_1 = require("@patternfly/react-core");
require("./PencilEditField.css");
const useFieldErrorMsg_1 = tslib_1.__importDefault(require("../../../hooks/useFieldErrorMsg"));
const InputFieldFocus = ({ name, isRequired, onBlur, showErrorMessage, }) => {
    const textInputRef = React.useRef();
    React.useEffect(() => { var _a; return (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, []);
    return (React.createElement(InputField_1.default, { name: name, isRequired: isRequired, onBlur: onBlur, ref: textInputRef, showErrorMessage: showErrorMessage }));
};
const PencilEditField = ({ name, isRequired, showErrorMessage }) => {
    const [edit, setEdit] = React.useState(false);
    const [field] = (0, formik_1.useField)({ name });
    const errrMsg = (0, useFieldErrorMsg_1.default)({ name });
    return (React.createElement(React.Fragment, null,
        edit ? (React.createElement(InputFieldFocus, { name: name, isRequired: isRequired, onBlur: () => setEdit(false), showErrorMessage: showErrorMessage })) : (React.createElement(React.Fragment, null,
            React.createElement(react_core_1.Split, null,
                React.createElement(react_core_1.SplitItem, { className: "ai-pencil-field__text" }, field.value),
                React.createElement(react_core_1.SplitItem, null,
                    React.createElement(pencil_alt_icon_1.PencilAltIcon, { onClick: () => setEdit(true) }))))),
        React.createElement("div", { className: "pf-v6-c-form__helper-text pf-m-error" }, errrMsg)));
};
exports.default = PencilEditField;
//# sourceMappingURL=PencilEditField.js.map