"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TagGroupFormControl = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const core_1 = require("@material-ui/core");
const TextField_1 = tslib_1.__importDefault(require("@material-ui/core/TextField"));
const Remove_1 = tslib_1.__importDefault(require("@mui/icons-material/Remove"));
const react_select_material_ui_1 = require("react-select-material-ui");
const TextEntryFormControl_1 = require("../TextEntryFormControl");
const CommonStyled_1 = require("./CommonStyled");
const PropertyEditorBoolean_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorBoolean");
const StringDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/StringDataDefinition");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
class XTagGroupEditUI extends react_1.default.Component {
    render() {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Allowed To Add New Tag", updateCallback: this.props.editMe.controlUpdate, propertyName: "allowedNewTag", editObject: this.props.editMe }), (0, jsx_runtime_1.jsx)(core_1.List, { style: { width: "100%" }, children: this.props.editMe.list.map((s, idx) => ((0, jsx_runtime_1.jsxs)(core_1.ListItem, { children: [(0, jsx_runtime_1.jsx)(core_1.ListItemText, { children: (0, jsx_runtime_1.jsx)(TextField_1.default, { label: "Option Label", value: s, size: "small", onChange: (event) => {
                                        this.props.editMe.list[idx] = event.target.value;
                                        this.props.editMe.controlUpdate();
                                    } }, idx) }), (0, jsx_runtime_1.jsx)(core_1.ListItemSecondaryAction, { children: (0, jsx_runtime_1.jsx)(core_1.IconButton, { color: "secondary", size: "small", onClick: () => {
                                        this.props.editMe.list.splice(idx, 1);
                                        this.props.editMe.controlUpdate();
                                    }, children: (0, jsx_runtime_1.jsx)(Remove_1.default, {}) }) })] }))) }), (0, jsx_runtime_1.jsx)(core_1.Button, { color: "primary", onClick: () => {
                        this.props.editMe.list.push("");
                        this.props.editMe.controlUpdate();
                    }, children: "Add Item" })] }));
    }
}
class TagGroupFormControl extends TextEntryFormControl_1.TextEntryFormControl {
    __type = "Tag Group";
    list = [];
    allowedNewTag = false;
    constructor() {
        super();
        this.canFocus = false;
    }
    render() {
        let items = this.list;
        if (!items || items.length === 0) {
            items = ["Sample Tag"];
        }
        const issueData = this.getFormContext().getControlContext(this).getRuntimeIssueData();
        const issueText = issueData?.text || "";
        return ((0, jsx_runtime_1.jsxs)(StyledFormControl, { error: Boolean(issueText), children: [(0, jsx_runtime_1.jsx)(core_1.FormLabel, { component: "legend", children: this.label }), (0, jsx_runtime_1.jsx)(react_select_material_ui_1.TagsSelect, { options: items, onChange: this.handleChange, SelectProps: {
                        isCreatable: this.allowedNewTag ? true : false,
                        msgNoOptionsAvailable: "All tags are selected",
                        msgNoOptionsMatchFilter: "No tag matches the filter",
                    }, "data-testid": this.valueName }), (issueText || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "tag-group"}-hinttext`, children: issueText ? issueText : this.hintText }))] }));
    }
    renderEditUI() {
        return (0, jsx_runtime_1.jsx)(XTagGroupEditUI, { editMe: this });
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new StringDataDefinition_1.StringDataDefinition();
        def.list = true;
        def.name = this.valueName;
        return def;
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "list", "allowedNewTag");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "list", "allowedNewTag");
    }
    handleChange = (value) => {
        if (this.valueName) {
            this.setFormDataValue(this.valueName, value);
        }
    };
}
exports.TagGroupFormControl = TagGroupFormControl;
const StyledFormControl = (0, styled_components_1.default)(core_1.FormControl) `
    width: 100%;
`;
//# sourceMappingURL=TagGroupFormControl.js.map