import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { StyledButton } from "../../CommonUI/Components/Button";
import { Collapse, IconButton } from "@material-ui/core";
import { PropertyEditorText } from "../../CommonUI/PropertyEditing/PropertyEditorText";
import { PropertyEditorSelect } from "../../CommonUI/PropertyEditing/PropertyEditorSelect";
import { PropertyEditorImage } from "../../CommonUI/PropertyEditing/PropertyEditorImage";
import { ButtonControlSize } from "../FormDesignConstants";
import { StyledLink } from "../../CommonUI/BuildUI/Link";
import { XBaseControl } from "./XBaseControl";
export var IXButtonType;
(function (IXButtonType) {
    IXButtonType["BUTTON"] = "button";
    IXButtonType["LINK"] = "link";
    IXButtonType["IMAGE"] = "image";
})(IXButtonType || (IXButtonType = {}));
class XButtonEditUI extends React.Component {
    render() {
        return (_jsxs(_Fragment, { children: [_jsx(PropertyEditorText, { editObject: this.props.editMe, propertyName: "label", updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(PropertyEditorSelect, { editObject: this.props.editMe, propertyName: "size", options: [ButtonControlSize.SMALL, ButtonControlSize.STANDARD, ButtonControlSize.LARGE], updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(PropertyEditorSelect, { editObject: this.props.editMe, propertyName: "type", options: [IXButtonType.BUTTON, IXButtonType.LINK, IXButtonType.IMAGE], updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(Collapse, Object.assign({ in: this.props.editMe.type === IXButtonType.IMAGE }, { children: _jsx(PropertyEditorImage, { editObject: this.props.editMe, propertyName: "image", updateCallback: this.props.editMe.controlUpdate, label: "Image" }, void 0) }), void 0)] }, void 0));
    }
}
export class XButton extends XBaseControl {
    constructor() {
        super(...arguments);
        this.type = IXButtonType.BUTTON;
        this.label = "Button Label";
        this.onClick = () => {
            var _a;
            (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.outcomeTriggered(this.getOutcomeName());
        };
        this.getOutcomeName = () => {
            return this.label;
        };
    }
    render() {
        switch (this.type) {
            case IXButtonType.BUTTON:
                return (_jsx(StyledButton, Object.assign({ variant: "contained", color: "primary", onClick: this.onClick, size: this.size, "data-testid": `xbutton-button-${this.label}`, ref: this.ref }, { children: this.label }), void 0));
            case IXButtonType.LINK:
                return (_jsx(StyledLink, Object.assign({ color: "primary", onClick: this.onClick, size: this.size, "data-testid": `xbutton-link-${this.label}`, ref: this.ref }, { children: this.label }), void 0));
            case IXButtonType.IMAGE:
                let height = 16;
                if (this.size === ButtonControlSize.SMALL) {
                    height = 12;
                }
                else if (this.size === ButtonControlSize.LARGE) {
                    height = 20;
                }
                return (_jsx(IconButton, Object.assign({ onClick: this.onClick, "data-testid": `xbutton-image-${this.label}`, ref: this.ref }, { children: _jsx("img", { src: this.image, alt: this.label, height: height }, void 0) }), void 0));
            default:
                return null;
        }
    }
    renderEditUI() {
        return _jsx(XButtonEditUI, { editMe: this }, void 0);
    }
    getDesignValidationIssues() {
        return [];
    }
    getRuntimeValidationIssues() {
        return [];
    }
    getAddedData() {
        return;
    }
}
//# sourceMappingURL=XButton.js.map