"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ButtonGroupFormControl = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const FormControl_1 = tslib_1.__importDefault(require("@material-ui/core/FormControl"));
const FormLabel_1 = tslib_1.__importDefault(require("@material-ui/core/FormLabel"));
const TextField_1 = tslib_1.__importDefault(require("@material-ui/core/TextField"));
const ToggleButton_1 = tslib_1.__importDefault(require("@mui/material/ToggleButton"));
const ToggleButtonGroup_1 = tslib_1.__importDefault(require("@mui/material/ToggleButtonGroup"));
const core_1 = require("@material-ui/core");
const Remove_1 = tslib_1.__importDefault(require("@mui/icons-material/Remove"));
const react_1 = tslib_1.__importDefault(require("react"));
const DataFormControl_1 = require("../DataFormControl");
const StringDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/StringDataDefinition");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
class XButtonGroupEditUI extends react_1.default.Component {
    render() {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextField_1.default, { label: "Content Text", value: this.props.editMe.label, onChange: (event) => {
                        this.props.editMe.label = event.target.value;
                        this.props.editMe.controlUpdate();
                    } }), (0, jsx_runtime_1.jsx)(TextField_1.default, { label: "Value Name", value: this.props.editMe.valueName, onChange: (event) => {
                        this.props.editMe.valueName = event.target.value;
                        this.props.editMe.controlUpdate();
                    } }), (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: "Button 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.jsxs)(core_1.Button, { color: "primary", onClick: () => {
                        this.props.editMe.list.push("");
                        this.props.editMe.controlUpdate();
                    }, children: [" ", "Add Button", " "] })] }));
    }
}
class ButtonGroupFormControl extends DataFormControl_1.DataFormControl {
    __type = "Button Group";
    label = "buttonGroupLabel";
    valueName = "buttonGroupValue";
    list = [];
    render() {
        let items = this.list;
        if (!items || items.length === 0) {
            items = ["needs configuration", "please setup"];
        }
        return ((0, jsx_runtime_1.jsxs)(FormControl_1.default, { component: "fieldset", children: [(0, jsx_runtime_1.jsx)(FormLabel_1.default, { component: "legend", children: this.label }), (0, jsx_runtime_1.jsx)(ToggleButtonGroup_1.default, { exclusive: true, color: "primary", "aria-label": "contained primary button group", onChange: this.handleChange, value: this.valueName ? this.getFormDataValue(this.valueName) : "", "data-testid": this.valueName, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(ToggleButton_1.default, { color: "primary", value: item, "aria-label": item, children: item }, index))) })] }));
    }
    handleChange = (event, newValue) => {
        if (this.valueName) {
            this.setFormDataValue(this.valueName, newValue);
        }
    };
    renderEditUI() {
        return (0, jsx_runtime_1.jsx)(XButtonGroupEditUI, { editMe: this });
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new StringDataDefinition_1.StringDataDefinition();
        def.name = this.valueName;
        return def;
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "readonly", "label", "valueName", "list");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "readonly", "label", "valueName", "list");
    }
}
exports.ButtonGroupFormControl = ButtonGroupFormControl;
//# sourceMappingURL=ButtonGroupFormControl.js.map