"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const formik_1 = require("formik");
const react_core_1 = require("@patternfly/react-core");
const utils_1 = require("./utils");
const exclamation_circle_icon_1 = tslib_1.__importDefault(require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon"));
const times_icon_1 = tslib_1.__importDefault(require("@patternfly/react-icons/dist/js/icons/times-icon"));
const use_translation_wrapper_1 = require("../../../hooks/use-translation-wrapper");
// Field value is a string[]
const MultiSelectField = (_a) => {
    var _b;
    var { label, options, helperText, placeholderText, isRequired, onChange, getHelperText, idPostfix, labelIcon } = _a, props = tslib_1.__rest(_a, ["label", "options", "helperText", "placeholderText", "isRequired", "onChange", "getHelperText", "idPostfix", "labelIcon"]);
    const [isOpen, setOpen] = react_1.default.useState(false);
    const [textValue, setTextValue] = react_1.default.useState('');
    const [field, { touched, error }, { setValue }] = (0, formik_1.useField)(props.name);
    const fieldId = (0, utils_1.getFieldId)(props.name, 'multiinput', idPostfix);
    const isValid = !(touched && error);
    const errorMessage = !isValid ? error : '';
    const hText = getHelperText ? getHelperText(((_b = field.value) === null || _b === void 0 ? void 0 : _b.join(',')) || '') : helperText;
    const { t } = (0, use_translation_wrapper_1.useTranslation)();
    const onToggle = (isOpen) => setOpen(isOpen);
    const onClearSelection = () => {
        // onChange && onChange(event);
        setValue([]);
        setTextValue('');
        onChange && onChange([]);
        setOpen(false);
    };
    const onSelect = (selection) => {
        // already selected
        const selected = field.value;
        // selected just now
        const selectionValue = selection.value || selection;
        let newValue;
        if (selected.includes(selectionValue)) {
            newValue = selected.filter((sel) => sel !== selectionValue);
        }
        else {
            newValue = [...field.value, selectionValue];
        }
        setValue(newValue);
        onChange && onChange(newValue);
    };
    const deleteLabel = (label) => {
        const newValue = field.value.filter((val) => val !== label);
        setValue(newValue);
        setTextValue('');
        onChange && onChange(newValue);
    };
    const filteredOptions = options.filter((option) => {
        const value = option.value;
        return (option.displayName.toLowerCase().includes(textValue.toLowerCase()) &&
            !(field.value || []).includes(value.toString()));
    });
    const children = filteredOptions.map((option) => {
        const value = option.value;
        return (react_1.default.createElement(react_core_1.DropdownItem, { key: option.id, id: option.id, value: value }, option.displayName));
    });
    return (react_1.default.createElement(react_core_1.FormGroup, { fieldId: fieldId, label: label, isRequired: isRequired, labelHelp: labelIcon },
        react_1.default.createElement(react_core_1.Dropdown, { id: fieldId, isOpen: isOpen, onSelect: (event, value) => onSelect(value), onOpenChange: onToggle, toggle: (toggleRef) => (react_1.default.createElement(react_core_1.MenuToggle, { ref: toggleRef, isFullWidth: true, onClick: () => onToggle(!isOpen), isExpanded: isOpen, variant: "typeahead", "data-testid": "multi-select-field-toggle" },
                react_1.default.createElement(react_core_1.TextInputGroup, null,
                    react_1.default.createElement(react_core_1.LabelGroup, null, field.value.map((currentLabel) => (react_1.default.createElement(react_core_1.Label, { key: currentLabel, variant: "outline", onClose: () => deleteLabel(currentLabel) }, currentLabel)))),
                    react_1.default.createElement(react_core_1.TextInputGroupMain, { placeholder: placeholderText, onClick: () => onToggle(!isOpen), value: textValue, onChange: (event, value) => setTextValue(value) }),
                    react_1.default.createElement(react_core_1.TextInputGroupUtilities, null,
                        react_1.default.createElement(react_core_1.Button, { variant: "plain", onClick: onClearSelection, "aria-label": "Clear button and input", icon: react_1.default.createElement(times_icon_1.default, null) }))))), shouldFocusToggleOnSelect: true },
            react_1.default.createElement(react_core_1.DropdownList, null, children.length ? (children) : (react_1.default.createElement(react_core_1.DropdownItem, { key: "No options available", id: "No options available", value: "No options available" }, t('ai:No options available'))))),
        (errorMessage || hText) && (react_1.default.createElement(react_core_1.FormHelperText, null,
            react_1.default.createElement(react_core_1.HelperText, null,
                react_1.default.createElement(react_core_1.HelperTextItem, { icon: react_1.default.createElement(exclamation_circle_icon_1.default, null), variant: errorMessage ? 'error' : 'default', id: errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`, "data-testid": `input-multiselectfield-${fieldId}-helper-text` }, errorMessage ? errorMessage : hText))))));
};
exports.default = MultiSelectField;
//# sourceMappingURL=MultiSelectField.js.map