"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ButtonFormControl = exports.IXButtonType = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const StyledButton_1 = require("../../../CommonUI/BuildlingBlocks/StyledButton");
const core_1 = require("@material-ui/core");
const PropertyEditorText_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorText");
const PropertyEditorSelect_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorSelect");
const PropertyEditorImage_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorImage");
const FormDesignConstants_1 = require("../../Utilities/FormDesignConstants");
const Link_1 = require("../../../CommonUI/BuilderUI/Link");
const FormControl_1 = require("../FormControl");
const PropertyEditorBoolean_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorBoolean");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
var IXButtonType;
(function (IXButtonType) {
    IXButtonType["BUTTON"] = "button";
    IXButtonType["LINK"] = "link";
    IXButtonType["IMAGE"] = "image";
})(IXButtonType = exports.IXButtonType || (exports.IXButtonType = {}));
class XButtonEditUI extends react_1.default.Component {
    render() {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { editObject: this.props.editMe, propertyName: "label", label: "label", updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { editObject: this.props.editMe, label: "Use name as outcomeName", propertyName: "useNameAsOutcomeName", updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: !this.props.editMe.useNameAsOutcomeName, children: (0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { editObject: this.props.editMe, propertyName: "outcomeName", label: "Outcome Name", updateCallback: this.props.editMe.controlUpdate }) }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: this.props.editMe, propertyName: "size", label: "Size", options: [FormDesignConstants_1.ButtonControlSize.SMALL, FormDesignConstants_1.ButtonControlSize.STANDARD, FormDesignConstants_1.ButtonControlSize.LARGE], updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: this.props.editMe, propertyName: "type", label: "Type", options: [IXButtonType.BUTTON, IXButtonType.LINK, IXButtonType.IMAGE], updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: this.props.editMe.type === IXButtonType.IMAGE, children: (0, jsx_runtime_1.jsx)(PropertyEditorImage_1.PropertyEditorImage, { editObject: this.props.editMe, propertyName: "image", updateCallback: this.props.editMe.controlUpdate, label: "Image" }) })] }));
    }
}
class ButtonFormControl extends FormControl_1.FormControl {
    __type = "Button";
    type = IXButtonType.BUTTON;
    image;
    label = "Button Label";
    size;
    useNameAsOutcomeName = true;
    outcomeName = "";
    onClick = () => {
        this.getFormContext()?.outcomeTriggered(this.getOutcomeName());
    };
    getOutcomeName = () => {
        if (this.useNameAsOutcomeName)
            return this.label;
        return this.outcomeName;
    };
    render() {
        switch (this.type) {
            case IXButtonType.BUTTON:
                return ((0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { variant: "contained", color: "primary", onClick: this.onClick, size: this.size, "data-testid": `xbutton-button-${this.label}`, ref: this.ref, children: this.label }));
            case IXButtonType.LINK:
                return ((0, jsx_runtime_1.jsx)(Link_1.StyledLink, { color: "primary", onClick: this.onClick, size: this.size, "data-testid": `xbutton-link-${this.label}`, ref: this.ref, children: this.label }));
            case IXButtonType.IMAGE:
                let height = 16;
                if (this.size === FormDesignConstants_1.ButtonControlSize.SMALL) {
                    height = 12;
                }
                else if (this.size === FormDesignConstants_1.ButtonControlSize.LARGE) {
                    height = 20;
                }
                return ((0, jsx_runtime_1.jsx)(core_1.IconButton, { onClick: this.onClick, "data-testid": `xbutton-image-${this.label}`, ref: this.ref, children: (0, jsx_runtime_1.jsx)("img", { src: this.image, alt: this.label, height: height }) }));
            default:
                return null;
        }
    }
    renderEditUI() {
        return (0, jsx_runtime_1.jsx)(XButtonEditUI, { editMe: this });
    }
    getDesignValidationIssues() {
        return [];
    }
    getRuntimeValidationIssues() {
        return [];
    }
    getAddedData() {
        return;
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "readonly", "type", "image", "label", "size", "useNameAsOutcomeName", "outcomeName");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "readonly", "type", "image", "label", "size", "useNameAsOutcomeName", "outcomeName");
    }
}
exports.ButtonFormControl = ButtonFormControl;
//# sourceMappingURL=ButtonFormControl.js.map