"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Renderables_1 = require("../Renderables");
var EventStream_1 = require("../../event/EventStream");
var EventType_1 = require("../../event/EventType");
var MessageType_1 = require("../../support/MessageType");
/**
 * Implementation of the 'selection' markup element.
 * A HTML div element is used to create a selection containing multiple 'selectionItem' elements.
 * Only one 'selectionItem' is visible.
 * The user can either click on the left or right side of the visible 'selectionItem' to select one of the two options.
 * If the click happened, the next 'selectionItem' will be showed.
 * For CSS manipulations the following classes are added:
 *  lto-selection: the container
 *  lto-selection-left: click to choose the left option
 *  lto-selection-right: click to choose the right option
 *  lto-animation-left: is set when clicking lto-selection-left
 *  lto-animation-right: is set when clicking lto-selection-right
 *
 * @see {@link IRenderable}
 * @see {@link IStackeable}
 */
var Selection = /** @class */ (function () {
    function Selection(message) {
        this.values = [];
        this.isPublished = false;
        this.animationDuration = 300;
        this.spec = message;
        this.numOfBlocks = this.spec.elements.length;
        this.selection = document.createElement('div');
    }
    /**
     * @inheritDoc
     */
    Selection.prototype.render = function (renderer, isNested) {
        var _this = this;
        var position = this.spec.position || 'left';
        this.selection.setAttribute("name", this.spec.name || "");
        this.selection.classList.add('lto-selection', "lto-" + position);
        if (this.spec.id !== undefined) {
            this.selection.id = this.spec.id;
        }
        if (this.spec.class !== undefined)
            this.spec.class.split(" ").forEach(function (e) { return _this.selection.classList.add(e); });
        var publishedBlocks = 0;
        var elements = (this.spec.elements || []).map(function (e) { return renderer.render(e, _this); });
        elements.forEach(function (e) { return e.forEach(function (items) {
            var left = document.createElement("div");
            var right = document.createElement("div");
            items.style.userSelect = "none";
            left.className = "lto-selection-left";
            right.className = "lto-selection-right";
            items.appendChild(left);
            items.appendChild(right);
            _this.selection.appendChild(items);
        }); });
        this.selection.querySelectorAll(".lto-selection-item").forEach(function (items) {
            items.addEventListener("click", function (ev) {
                var _a, _b;
                //@ts-ignore
                if (ev.target.getAttribute("class") === "lto-selection-left") {
                    items.classList.add("lto-animate-left");
                    _this.values.push((_a = {}, _a[items.getAttribute("name") || ""] = "left", _a));
                }
                else {
                    items.classList.add("lto-animate-right");
                    _this.values.push((_b = {}, _b[items.getAttribute("name") || ""] = "right", _b));
                }
                setTimeout(function () { return items.style.display = "none"; }, _this.animationDuration);
                if (++publishedBlocks === _this.numOfBlocks) {
                    // wait till animation is finished
                    setTimeout(function () {
                        _this.setFinished();
                        _this.publish();
                    }, _this.animationDuration);
                }
            });
        });
        if (isNested) {
            this.selection.classList.add('lto-nested');
        }
        if (this.spec.countdownInSec !== 0) {
            setTimeout(function () {
                _this.setFinished();
                _this.publish();
            }, this.spec.countdownInSec * 1000);
        }
        return this.selection;
    };
    Selection.prototype.publish = function () {
        if (!this.isPublished) {
            this.selection.style.pointerEvents = "none";
            var evType = EventType_1.EventType.withChannelId(EventType_1.EventType.PUBLISH, this.spec.channelId);
            var name_1 = this.spec.name;
            var type = MessageType_1.MessageType.SUBMIT;
            var payload = { value: this.values, text: this.spec.text };
            var attributes = { name: name_1, value: this.values };
            EventStream_1.default.emit(evType, { type: type, payload: payload, attributes: attributes });
            this.isPublished = true;
        }
    };
    Selection.prototype.setFinished = function () {
        this.selection.classList.add("lto-selection-finished");
    };
    return Selection;
}());
exports.Selection = Selection;
Renderables_1.default.register("selection", Selection);
//# sourceMappingURL=index.js.map