"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LabelField = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const formik_1 = require("formik");
const react_core_1 = require("@patternfly/react-core");
const hooks_1 = require("../../../hooks");
const exclamation_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon");
const utils_1 = require("./utils");
const LabelField = ({ name, label, idPostfix }) => {
    const { t } = (0, hooks_1.useTranslation)();
    const [{ value: labels }, { touched, error }, { setValue: setLabels, setTouched }] = (0, formik_1.useField)(name);
    const fieldId = (0, utils_1.getFieldId)(name, 'input', idPostfix);
    const isValid = !(touched && error);
    const errorMessage = !isValid ? error : '';
    const onDelete = (_ev, index) => {
        const newLabels = [...labels];
        newLabels.splice(index, 1);
        setTouched(true);
        setLabels(newLabels, true);
    };
    const onAdd = (text) => {
        if (!text) {
            return;
        }
        const newLabels = [...labels, text];
        setTouched(true);
        setLabels(newLabels, true);
    };
    const onEdit = (index, nextText) => {
        const newLabels = [...labels];
        newLabels.splice(index, 1, nextText);
        setTouched(true);
        setLabels(newLabels, true);
    };
    return (React.createElement(react_core_1.FormGroup, { label: label },
        React.createElement(react_core_1.LabelGroup, { numLabels: 5, addLabelControl: React.createElement(EditableLabelControl, { defaultLabel: "key=value", onAddLabel: onAdd }) }, labels.map((label, index) => {
            return (React.createElement(react_core_1.Label, { key: index, textMaxWidth: "16ch", onClose: (e) => onDelete(e, index), onEditCancel: (_, prevText) => onEdit(index, prevText), onEditComplete: (_, newText) => onEdit(index, newText), 
                /* Add a basic tooltip as the PF tooltip doesn't work for editable labels */
                title: label, isEditable: true }, label));
        })),
        React.createElement(react_core_1.FormHelperText, null,
            React.createElement(react_core_1.HelperText, null,
                React.createElement(react_core_1.HelperTextItem, { id: `${fieldId}-helper-text`, "data-testid": `input-label-${fieldId}-helper-text` }, t("ai:Enter a key=value and then press 'enter' to input the label.")),
                errorMessage && (React.createElement(react_core_1.HelperTextItem, { icon: React.createElement(exclamation_circle_icon_1.ExclamationCircleIcon, null), variant: 'error', id: `${fieldId}-helper-error`, "data-testid": `input-label-${fieldId}-helper-error` }, errorMessage))))));
};
exports.LabelField = LabelField;
const EditableLabelControl = ({ defaultLabel, onAddLabel }) => {
    const [isEditing, setIsEditing] = React.useState(false);
    const [label, setLabel] = React.useState('');
    const { t } = (0, hooks_1.useTranslation)();
    const onConfirmAdd = () => {
        onAddLabel(label);
        setIsEditing(false);
        setLabel('');
    };
    const onDiscardAdd = () => {
        setIsEditing(false);
        setLabel('');
    };
    return isEditing ? (React.createElement(react_core_1.TextInput, { "aria-label": t('ai:New label'), autoFocus: true, value: label, onChange: (_, value) => {
            setLabel(value);
        }, onBlur: onConfirmAdd, onKeyDown: (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
                onConfirmAdd();
            }
            else if (e.key === 'Escape') {
                e.preventDefault();
                onDiscardAdd();
            }
        } })) : (React.createElement(react_core_1.Button, { "aria-label": t('ai:Add label'), variant: "link", className: "pf-v6-u-ml-xs", isInline: true, onClick: () => {
            setIsEditing(true);
            setLabel(defaultLabel);
        } }, t('ai:Add label')));
};
//# sourceMappingURL=LabelField.js.map