import Renderables from '../Renderables';
import EventStream from '../../event/EventStream';
import Properties from "../Properties";
import BootstrapCarousel from "./BootstrapCarousel";
import { EventType } from "../../event/EventType";
/**
 * Implementation of the 'carousel' markup element.
 * A HTML div element which can contain several 'form' or 'block' elements.
 * The user can switch between cells by clicking the next or previous button.
 * For CSS manipulations the following classes are added:
 *  lto-carousel: the container
 *  lto-carousel-cell-container: container for all carousel cell items
 *  lto-carousel-cell: the container where a single markup element is wrapped
 *  lto-next: selects the next carousel cell
 *  lto-previous: selects the previous carousel cell
 *
 * @see {@link IRenderable}
 * @see {@link IStackeable}
 */
var Carousel = /** @class */ (function () {
    function Carousel(message) {
        this.spec = message;
        this.cellContainer = document.createElement("div");
        this.cellContainer.classList.add('lto-carousel-cell-container');
        this.carousel = document.createElement("div");
    }
    /**
     * @inheritDoc
     */
    Carousel.prototype.render = function (renderer, isNested) {
        var _this = this;
        if (Properties.resolve("CAROUSEL") === "bootstrap") {
            var bsc = new BootstrapCarousel(this.spec);
            return bsc.render(renderer, isNested);
        }
        this.carousel.classList.add('lto-carousel', 'lto-left');
        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); });
        }
        (this.spec.elements || []).map(function (e) {
            renderer.render(e, _this).forEach(function (x) {
                x.classList.add("lto-carousel-cell");
                _this.cellContainer.appendChild(x);
            });
        });
        var next = document.createElement("div");
        var previous = document.createElement("div");
        next.addEventListener("click", function () { return _this.next(_this.getCurrent()); });
        previous.addEventListener("click", function () { return _this.previous(_this.getCurrent()); });
        next.classList.add("lto-next");
        previous.classList.add("lto-previous");
        var nextSpan = document.createElement("span");
        nextSpan.appendChild(document.createTextNode(">"));
        next.appendChild(nextSpan);
        var previousSpan = document.createElement("span");
        previousSpan.appendChild(document.createTextNode("<"));
        previous.appendChild(previousSpan);
        this.resetCells();
        this.init(this.getCurrent());
        var _loop_1 = function (i) {
            var block = this_1.cellContainer.children[i];
            var attribute = document.createAttribute("data-counter");
            attribute.value = i + "";
            block.attributes.setNamedItem(attribute);
            var suggestions = block.querySelectorAll(".lto-suggestion");
            suggestions.forEach(function (suggestion) {
                block.removeChild(suggestion);
                suggestion.classList.remove("lto-nested");
                suggestion.attributes.setNamedItem(attribute.cloneNode(true));
                if (i > 0) {
                    suggestion.classList.add("lto-hide");
                }
                renderer.appendSuggest(suggestion);
            });
        };
        var this_1 = this;
        for (var i = 0; i < this.cellContainer.children.length; i++) {
            _loop_1(i);
        }
        this.carousel.appendChild(this.cellContainer);
        this.carousel.appendChild(next);
        this.carousel.appendChild(previous);
        return this.carousel;
    };
    Carousel.prototype.init = function (current) {
        var _this = this;
        this.resetCells();
        EventStream.emit(EventType.withChannelId(EventType.CAROUSEL, this.spec.channelId), current);
        this.cellContainer.children[current].classList.remove("lto-not-visible-item");
        this.cellContainer.children[current].classList.add("lto-center-item");
        if (current + 1 < this.cellContainer.children.length) {
            this.cellContainer.children[current + 1].classList.remove("lto-not-visible-item");
            this.cellContainer.children[current + 1].classList.add("lto-next-item");
        }
        setTimeout(function () { return _this.carousel.style.height = _this.cellContainer.children[current].scrollHeight + "px"; }, 1);
    };
    Carousel.prototype.next = function (current) {
        var _this = this;
        EventStream.emit(EventType.withChannelId(EventType.CAROUSEL, this.spec.channelId), current);
        this.resetCells();
        current + 1 === this.cellContainer.children.length ? current = 0 : current++;
        EventStream.emit(EventType.withChannelId(EventType.CAROUSEL, this.spec.channelId), current);
        if (current > 0) {
            this.cellContainer.children[current - 1].classList.remove("lto-not-visible-item");
            this.cellContainer.children[current - 1].classList.add("lto-previous-item");
        }
        this.cellContainer.children[current].classList.remove("lto-not-visible-item");
        this.cellContainer.children[current].classList.add("lto-center-item");
        if (current + 1 < this.cellContainer.children.length) {
            this.cellContainer.children[current + 1].classList.remove("lto-not-visible-item");
            this.cellContainer.children[current + 1].classList.add("lto-next-item");
        }
        setTimeout(function () { return _this.carousel.style.height = _this.cellContainer.children[current].scrollHeight + "px"; }, 1);
    };
    Carousel.prototype.previous = function (current) {
        var _this = this;
        this.resetCells();
        current === 0 ? current = this.cellContainer.children.length - 1 : current--;
        EventStream.emit(EventType.withChannelId(EventType.CAROUSEL, this.spec.channelId), current);
        if (current - 1 > -1) {
            this.cellContainer.children[current - 1].classList.remove("lto-not-visible-item");
            this.cellContainer.children[current - 1].classList.add("lto-previous-item");
        }
        this.cellContainer.children[current].classList.remove("lto-not-visible-item");
        this.cellContainer.children[current].classList.add("lto-center-item");
        if (current + 1 < this.cellContainer.children.length) {
            this.cellContainer.children[current + 1].classList.remove("lto-not-visible-item");
            this.cellContainer.children[current + 1].classList.add("lto-next-item");
        }
        setTimeout(function () { return _this.carousel.style.height = _this.cellContainer.children[current].scrollHeight + "px"; }, 1);
    };
    Carousel.prototype.getCurrent = function () {
        var current = 0;
        var counter = 0;
        this.cellContainer.childNodes.forEach(function (node) {
            if (node.classList.contains("lto-center-item")) {
                current = counter;
            }
            counter++;
        });
        return current;
    };
    Carousel.prototype.resetCells = function () {
        this.cellContainer.childNodes.forEach(function (node) {
            node.classList.remove("lto-center-item", "lto-next-item", "lto-previous-item", "lto-not-visible-item");
            node.classList.add("lto-not-visible-item");
        });
    };
    return Carousel;
}());
export { Carousel };
Renderables.register("carousel", Carousel);
//# sourceMappingURL=index.js.map