import EventStream from '../../event/EventStream';
import Renderables from '../Renderables';
import { EventType } from "../../event/EventType";
import { MessageType } from "../../support/MessageType";
import node from "../../support/node";
import { Specification } from "../../support/Specification";
import wrap from "../../support/node";
/**
 * Implementation of the 'button' markup element.
 * A HTML button element is created with type button and
 * if given in the markup its name, text and value. The
 * class lto-button is added to allow CSS modifications.
 * For form submit buttons we refer to @see {@link Submit}
 *
 * @see {@link IRenderable}
 */
var Button = /** @class */ (function () {
    function Button(message) {
        this.spec = message;
    }
    /**
     * @inheritDoc
     */
    Button.prototype.render = function (renderer, isNested) {
        var _this = this;
        var button = node("button");
        new Specification(this.spec).initNode(button, "lto-button");
        button.setAriaLabel(this.spec.ariaLabel);
        button.addAttributes({ type: Button.TYPE, name: this.spec.name, value: this.spec.value });
        if (isNested) {
            button.addClasses("lto-nested");
        }
        var elements = (this.spec.elements || []).map(function (e) { return renderer.render(e, _this); });
        elements.forEach(function (e) { return e.forEach(function (x) { return button.appendChild(wrap(x)); }); });
        if (button.containsClass("lto-left")) {
            button.onClick(function (ev) {
                ev.preventDefault();
                var text = _this.spec.text || "";
                var name = _this.spec.name || "";
                var value = _this.spec.value || "";
                var attributes = { name: name, value: value };
                var payload = { text: text, name: name, value: value };
                var type = MessageType.BUTTON;
                var evType = EventType.withChannelId(EventType.PUBLISH, _this.spec.channelId);
                EventStream.emit(evType, { attributes: attributes, type: type, payload: payload });
                Button.cleanupButtons(_this.spec.interactionContentClassName);
                // add right button
                var newButton = Object.assign(attributes, {
                    class: _this.spec.class,
                    position: "right",
                    timestamp: new Date().getTime().toString(),
                    elements: _this.spec.elements,
                    channelId: _this.spec.channelId,
                    text: _this.spec.text,
                    type: Button.TYPE
                });
                renderer.render({ type: "container", elements: [newButton] }).forEach(function (e) { return renderer.appendContent(e); });
            });
        }
        return button.unwrap();
    };
    Button.cleanupButtons = function (className) {
        var interactionContent = document.getElementsByClassName(className || "lto-content")[0];
        if (!interactionContent)
            return;
        // remove left buttons from interaction content
        var buttons = interactionContent.querySelectorAll(".lto-button.lto-left");
        buttons.forEach(function (element) {
            if (element.classList.contains("lto-persistent")) {
                element.style.pointerEvents = "none";
            }
            else {
                element.remove();
            }
        });
        // remove left submits from interaction content
        var submits = interactionContent.querySelectorAll(".lto-submit.lto-left");
        submits.forEach(function (element) {
            if (element.classList.contains("lto-persistent")) {
                element.style.pointerEvents = "none";
            }
            else {
                element.remove();
            }
        });
        // remove left suggestions
        var suggestions = document.querySelectorAll(".lto-suggestion.lto-left");
        suggestions.forEach(function (element) { return element.remove(); });
    };
    Button.TYPE = "button";
    return Button;
}());
export { Button };
Renderables.register(Button.TYPE, Button);
//# sourceMappingURL=index.js.map