import Renderables from '../Renderables';
/**
 * Implementation of the 'reel' markup element.
 * A HTML div element where multiple 'reelValue' can be displayed.
 * The user can select a 'reelValue' by clicking up or down.
 * For CSS manipulations the following classes are added:
 *  lto-reel: the container
 *  lto-up: selects the upper 'reelValue'
 *  lto-down: selects the lower 'reelValue'
 *
 * @see {@link IRenderable}
 * @see {@link IStackeable}
 */
var Reel = /** @class */ (function () {
    function Reel(message) {
        this.spec = message;
        this.counter = 0;
        this.reel = document.createElement('div');
        this.container = document.createElement('div');
    }
    /**
     * @inheritDoc
     */
    Reel.prototype.render = function (renderer, isNested) {
        var _this = this;
        var position = this.spec.position || 'left';
        this.reel.classList.add('lto-reel', "lto-" + position);
        if (this.spec.id !== undefined) {
            this.container.id = this.spec.id;
        }
        if (this.spec.class !== undefined) {
            this.spec.class.split(" ").forEach(function (e) { return _this.reel.classList.add(e); });
        }
        this.reel.setAttribute("name", this.spec.name || "");
        var up = document.createElement("div");
        var upSpan = document.createElement("span");
        upSpan.appendChild(document.createTextNode("up"));
        up.appendChild(upSpan);
        up.classList.add("lto-up");
        up.addEventListener("click", function () { return _this.next(); });
        var down = document.createElement("div");
        var downSpan = document.createElement("span");
        downSpan.appendChild(document.createTextNode("down"));
        down.appendChild(downSpan);
        down.classList.add("lto-down");
        down.addEventListener("click", function () { return _this.previous(); });
        var elements = (this.spec.elements || []).map(function (e) { return renderer.render(e, _this); });
        elements.forEach(function (e) { return e.forEach(function (x) { return _this.container.appendChild(x); }); });
        this.container.childNodes.forEach(function (child) {
            child.classList.add("lto-passive");
        });
        this.container.children[0].classList.remove("lto-passive");
        this.container.children[0].classList.add("lto-active");
        if (isNested) {
            this.reel.classList.add('lto-nested');
        }
        this.setValueToReel(this.container.children[this.counter].getAttribute("data-value"));
        this.reel.appendChild(up);
        this.reel.appendChild(this.container);
        this.reel.appendChild(down);
        return this.reel;
    };
    Reel.prototype.next = function () {
        (this.counter + 1) < this.container.children.length ? this.counter++ : this.counter = 0;
        this.setValueToReel(this.container.children[this.counter].getAttribute("data-value"));
        this.container.childNodes.forEach(function (child) {
            child.classList.remove("lto-passive", "lto-active");
            child.classList.add("lto-passive");
        });
        this.container.children[this.counter].classList.remove("lto-passive");
        this.container.children[this.counter].classList.add("lto-active");
    };
    Reel.prototype.previous = function () {
        (this.counter - 1) >= 0 ? this.counter-- : this.counter = this.container.children.length - 1;
        this.setValueToReel(this.container.children[this.counter].getAttribute("data-value"));
        this.container.childNodes.forEach(function (child) {
            child.classList.remove("lto-passive", "lto-active");
            child.classList.add("lto-passive");
        });
        this.container.children[this.counter].classList.remove("lto-passive");
        this.container.children[this.counter].classList.add("lto-active");
    };
    Reel.prototype.setValueToReel = function (value) {
        this.reel.setAttribute("data-value", value);
    };
    return Reel;
}());
export { Reel };
Renderables.register("reel", Reel);
//# sourceMappingURL=index.js.map