import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { Button, FormControl, FormLabel, IconButton, List, ListItem, ListItemText, ListItemSecondaryAction, } from "@material-ui/core";
import TextField from "@material-ui/core/TextField";
import RemoveIcon from "@material-ui/icons/Remove";
import { TagsSelect } from "react-select-material-ui";
import { BaseTextEntryControl } from "./BaseTextEntryControl";
import { StyledFormHelperText } from "./XCommonStyled";
import { PropertyEditorBoolean } from "../../CommonUI/PropertyEditing/PropertyEditorBoolean";
import { StringDataDefinition } from "../../Common/Data/Definitions/StringDataDefinition";
class XTagGroupEditUI extends React.Component {
    render() {
        return (_jsxs(_Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), _jsx(PropertyEditorBoolean, { label: "Allowed To Add New Tag", updateCallback: this.props.editMe.controlUpdate, propertyName: "allowedNewTag", editObject: this.props.editMe }, void 0),
                _jsx(List, Object.assign({ style: { width: "100%" } }, { children: this.props.editMe.list.map((s, idx) => (_jsxs(ListItem, { children: [_jsx(ListItemText, { children: _jsx(TextField, { label: "Option Label", value: s, size: "small", onChange: (event) => {
                                        this.props.editMe.list[idx] = event.target.value;
                                        this.props.editMe.controlUpdate();
                                    } }, idx) }, void 0),
                            _jsx(ListItemSecondaryAction, { children: _jsx(IconButton, Object.assign({ color: "secondary", size: "small", onClick: () => {
                                        this.props.editMe.list.splice(idx, 1);
                                        this.props.editMe.controlUpdate();
                                    } }, { children: _jsx(RemoveIcon, {}, void 0) }), void 0) }, void 0)] }, void 0))) }), void 0),
                _jsx(Button, Object.assign({ color: "primary", onClick: () => {
                        this.props.editMe.list.push("");
                        this.props.editMe.controlUpdate();
                    } }, { children: "Add Item" }), void 0)] }, void 0));
    }
}
export class XTagGroup extends BaseTextEntryControl {
    constructor() {
        super();
        this.list = [];
        this.allowedNewTag = false;
        this.handleChange = (value) => {
            if (this.valueName) {
                this.setFormDataValue(this.valueName, value);
            }
        };
        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 === null || issueData === void 0 ? void 0 : issueData.text) || "";
        return (_jsxs(StyledFormControl, Object.assign({ error: Boolean(issueText) }, { children: [_jsx(FormLabel, Object.assign({ component: "legend" }, { children: this.label }), void 0),
                _jsx(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 }, void 0),
                (issueText || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "tag-group"}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0));
    }
    renderEditUI() {
        return _jsx(XTagGroupEditUI, { editMe: this }, void 0);
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new StringDataDefinition();
        def.list = true;
        def.name = this.valueName;
        return def;
    }
}
const StyledFormControl = styled(FormControl) `
    width: 100%;
`;
//# sourceMappingURL=XTagGroup.js.map