"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RichValidation = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const formik_1 = require("formik");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_core_1 = require("@patternfly/react-core");
const check_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/check-circle-icon");
const check_icon_1 = require("@patternfly/react-icons/dist/js/icons/check-icon");
const exclamation_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon");
const info_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/info-circle-icon");
const times_icon_1 = require("@patternfly/react-icons/dist/js/icons/times-icon");
const utils_1 = require("./utils");
require("./RichInputField.css");
const getHelperTextVariant = (validationMessage, value, errors) => {
    if (!value) {
        return { variant: 'indeterminate' };
    }
    else if (errors === null || errors === void 0 ? void 0 : errors.includes(validationMessage)) {
        return { variant: 'error', icon: React.createElement(times_icon_1.TimesIcon, null) };
    }
    return { variant: 'success', icon: React.createElement(check_icon_1.CheckIcon, null) };
};
const RichValidation = ({ value, error, richValidationMessages, fieldId, }) => {
    return (React.createElement(react_core_1.HelperText, { component: "ul", className: "rich-input__rules" }, Object.keys(richValidationMessages).map((key) => {
        const variant = getHelperTextVariant(richValidationMessages[key], value, error);
        return (React.createElement(react_core_1.HelperTextItem, Object.assign({ key: key, component: "li" }, variant, { "data-testid": `input-richinputvalidation-${fieldId}-helper-text` }), richValidationMessages[key]));
    })));
};
exports.RichValidation = RichValidation;
// eslint-disable-next-line react/display-name
const RichInputField = React.forwardRef((_a, ref) => {
    var { label, labelIcon, helperText, isRequired, validate, idPostfix, richValidationMessages, noDefaultOnChange, onChange } = _a, props = tslib_1.__rest(_a, ["label", "labelIcon", "helperText", "isRequired", "validate", "idPostfix", "richValidationMessages", "noDefaultOnChange", "onChange"]);
    const [popoverOpen, setPopoverOpen] = React.useState(false);
    const [field, { error, value, touched }, { setTouched }] = (0, formik_1.useField)({
        name: props.name,
        validate,
    });
    const fieldId = (0, utils_1.getFieldId)(props.name, 'input', idPostfix);
    const isValid = !(touched && (error === null || error === void 0 ? void 0 : error.length));
    const errorMessage = isValid ? '' : error[0];
    return (React.createElement(react_core_1.FormGroup, { id: `form-control__${fieldId}`, fieldId: fieldId, label: label, isRequired: isRequired, labelHelp: labelIcon },
        React.createElement(react_core_1.InputGroup, { className: (0, classnames_1.default)('rich-input__group', { 'rich_input__group--invalid': !isValid }) },
            React.createElement(react_core_1.InputGroupItem, { isFill: true },
                React.createElement(react_core_1.TextInput, Object.assign({}, field, props, { ref: ref, id: fieldId, isRequired: isRequired, "aria-describedby": `${fieldId}-helper`, onChange: (event, val) => {
                        !popoverOpen && setPopoverOpen(true);
                        !noDefaultOnChange && field.onChange(event);
                        onChange && onChange(event);
                        if (!touched && (val === null || val === void 0 ? void 0 : val.length)) {
                            setTouched(true);
                        }
                    }, className: "rich-input__text", onBlur: () => {
                        setPopoverOpen(false);
                        setTouched(true);
                    } }))),
            React.createElement(react_core_1.InputGroupItem, null,
                React.createElement(react_core_1.Popover, { isVisible: popoverOpen, shouldClose: () => setPopoverOpen(false), shouldOpen: () => setPopoverOpen(true), "aria-label": "validation popover", position: react_core_1.PopoverPosition.top, bodyContent: React.createElement(exports.RichValidation, { value: value, error: error, richValidationMessages: richValidationMessages, fieldId: fieldId }), withFocusTrap: false },
                    React.createElement(react_core_1.Button, { icon: !isValid ? (React.createElement(react_core_1.Icon, { status: "danger" },
                            React.createElement(exclamation_circle_icon_1.ExclamationCircleIcon, null))) : value ? (React.createElement(react_core_1.Icon, { status: "success" },
                            React.createElement(check_circle_icon_1.CheckCircleIcon, null))) : (React.createElement(react_core_1.Icon, { status: "info" },
                            React.createElement(info_circle_icon_1.InfoCircleIcon, null))), variant: react_core_1.ButtonVariant.control, "aria-label": "Validation" })))),
        (errorMessage || helperText) && (React.createElement(react_core_1.FormHelperText, null,
            React.createElement(react_core_1.HelperText, null,
                React.createElement(react_core_1.HelperTextItem, { icon: errorMessage && React.createElement(exclamation_circle_icon_1.ExclamationCircleIcon, null), variant: isValid ? 'default' : 'error', id: isValid ? `${fieldId}-helper` : `${fieldId}-helper-error`, "data-testid": `input-richinput-${fieldId}-helper-text` }, errorMessage ? errorMessage : helperText))))));
});
exports.default = RichInputField;
//# sourceMappingURL=RichInputField.js.map