"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var EventStream_1 = require("../../event/EventStream");
var EventType_1 = require("../../event/EventType");
var Direction;
(function (Direction) {
    Direction[Direction["Previous"] = 0] = "Previous";
    Direction[Direction["Next"] = 1] = "Next";
})(Direction || (Direction = {}));
/**
 * Implementation of the Bootstrap 4 Carousel
 *
 * @see {@link IRenderable}
 * @see {@link IStackeable}
 */
var BootstrapCarousel = /** @class */ (function () {
    function BootstrapCarousel(message) {
        this.spec = message;
        this.carousel = document.createElement('div');
        this.carouselInner = document.createElement('div');
        this.carouselIndicator = document.createElement('ol');
    }
    /**
     * @inheritDoc
     */
    BootstrapCarousel.prototype.render = function (renderer, isNested) {
        var _this = this;
        this.carousel.classList.add('carousel', 'slide');
        this.carousel.setAttribute('data-ride', 'carousel');
        this.carousel.setAttribute('data-interval', 'false');
        this.carousel.id = 'ltoBootstrapCarousel';
        this.carouselInner.classList.add('carousel-inner');
        this.carouselIndicator.classList.add('carousel-indicators');
        if (this.spec.id !== undefined) {
            this.carousel.id = this.spec.id;
        }
        if (this.spec.class !== undefined) {
            this.spec.class.split(" ").forEach(function (e) { return _this.carousel.classList.add(e); });
        }
        var idx = 0;
        (this.spec.elements || []).map(function (e) {
            renderer.render(e, _this).forEach(function (x) {
                x.classList.add('carousel-item');
                if (idx === 0) {
                    x.classList.add('active');
                }
                _this.carouselInner.appendChild(x);
                _this.carouselIndicator.appendChild(_this.getIndicator(idx));
                idx++;
            });
        });
        EventStream_1.default.emit(EventType_1.EventType.withChannelId(EventType_1.EventType.CAROUSEL, this.spec.channelId), this.current());
        this.carousel.appendChild(this.carouselIndicator);
        this.carousel.appendChild(this.carouselInner);
        this.carousel.appendChild(this.getNavigation(Direction.Previous));
        this.carousel.appendChild(this.getNavigation(Direction.Next));
        return this.carousel;
    };
    BootstrapCarousel.prototype.getIndicator = function (idx) {
        var indicator = document.createElement('li');
        !idx && indicator.classList.add('active');
        indicator.setAttribute('data-target', '#ltoBootstrapCarousel');
        indicator.setAttribute('data-slide-to', idx.toString());
        return indicator;
    };
    BootstrapCarousel.prototype.getNavigation = function (direction) {
        var navItem = document.createElement('a');
        navItem.classList.add(direction ? 'carousel-control-prev' : 'carousel-control-next');
        navItem.href = '#ltoBootstrapCarousel';
        navItem.setAttribute('role', 'button');
        navItem.setAttribute('data-slide', direction ? 'prev' : 'next');
        var navIcon = document.createElement('span');
        navIcon.classList.add(direction ? 'carousel-control-prev-icon' : 'carousel-control-next-icon');
        navIcon.setAttribute('aria-hidden', 'true');
        var navText = document.createElement('span');
        navText.classList.add('sr-only');
        navText.innerText = direction ? 'Previous' : 'Next';
        navItem.appendChild(navIcon);
        navItem.appendChild(navText);
        return navItem;
    };
    BootstrapCarousel.prototype.current = function () {
        var current = 0;
        var counter = 0;
        this.carouselInner.childNodes.forEach(function (item) {
            if (item.classList.contains('active')) {
                current = counter;
            }
            counter++;
        });
        return current;
    };
    return BootstrapCarousel;
}());
exports.default = BootstrapCarousel;
//# sourceMappingURL=BootstrapCarousel.js.map