var _a;
import { __decorate, __extends } from "tslib";
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop, Watch } from 'vue-property-decorator';
import { CAROUSEL_ITEM_NAME, CAROUSEL_NAME, TOUCH_NAME } from '../component-names';
import TouchPlugin, { MTouch } from '../touch/touch';
import { MCarouselItem } from './carousel-item/carousel-item';
import WithRender from './carousel.html?style=./carousel.scss';
var MCarousel = /** @class */ (function (_super) {
    __extends(MCarousel, _super);
    function MCarousel() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.items = [];
        _this.internalIndex = 0;
        return _this;
    }
    MCarousel.prototype.onTap = function (event) {
        this.$emit('tap', event);
    };
    MCarousel.prototype.onClick = function (event) {
        this.$emit('click', event);
    };
    MCarousel.prototype.mounted = function () {
        var _this = this;
        this.toggleKeyboardNavigation(this.keyboardNavigable);
        if (this.interval) {
            this.updateInterval = setInterval(function () {
                _this.showNextItem();
            }, this.interval);
        }
        this.initialize();
    };
    MCarousel.prototype.updated = function () {
        this.initialize();
    };
    MCarousel.prototype.beforeDestroy = function () {
        this.toggleKeyboardNavigation(false);
        clearInterval(this.updateInterval);
    };
    MCarousel.prototype.initialize = function () {
        var _this = this;
        if (this.isIndexValid(this.propIndex) || this.propIndex === 0 && this.items.length === 0) {
            this.internalIndex = this.propIndex;
            var items_1 = [];
            if (this.$slots.default) {
                var index_1 = 0;
                this.$slots.default.forEach(function (item) {
                    if (item.componentInstance instanceof MCarouselItem) {
                        item.componentInstance.position = index_1 - _this.internalIndex;
                        item.componentInstance.margin = _this.margin;
                        item.componentInstance.$slots.default.forEach(function (content) {
                            var el = content.componentInstance && content.componentInstance.$el || content.elm;
                            if (el instanceof HTMLElement && (el.tagName === 'IMG' || el.tagName === 'PICTURE')) {
                                el.style.maxWidth = '100%';
                                el.style.maxHeight = '100%';
                            }
                        });
                        items_1.push(item.componentInstance);
                        index_1++;
                    }
                });
                this.items = items_1.length > 0 ? items_1 : this.items;
            }
        }
    };
    MCarousel.prototype.toggleKeyboardNavigation = function (value) {
        document.removeEventListener('keyup', this.changeItem);
        if (value) {
            document.addEventListener('keyup', this.changeItem);
        }
    };
    MCarousel.prototype.changeItem = function (e) {
        if (e.keyCode === 37) {
            this.showPrevItem();
        }
        else if (e.keyCode === 39) {
            this.showNextItem();
        }
    };
    Object.defineProperty(MCarousel.prototype, "propIndex", {
        get: function () {
            if (this.index !== undefined) {
                return this.index;
            }
            return this.internalIndex;
        },
        set: function (value) {
            if (value !== this.propIndex && this.isIndexValid(value)) {
                this.items.forEach(function (item, index) {
                    item.position = index - value;
                });
                this.internalIndex = value;
                this.$emit('update:index', value);
            }
        },
        enumerable: false,
        configurable: true
    });
    MCarousel.prototype.isIndexValid = function (value) {
        return value >= 0 && value < this.numberOfCarouselItems();
    };
    MCarousel.prototype.numberOfCarouselItems = function () {
        var count = 0;
        if (this.$slots.default) {
            this.$slots.default.forEach(function (item) {
                if (item.componentInstance instanceof MCarouselItem) {
                    count++;
                }
            });
        }
        return count;
    };
    MCarousel.prototype.showPrevItem = function (resetInterval) {
        if (resetInterval === void 0) { resetInterval = false; }
        if (!this.swipeDisabled && this.isIndexValid(this.propIndex - 1)) {
            this.showItem(this.propIndex - 1, resetInterval);
        }
    };
    MCarousel.prototype.showNextItem = function (resetInterval) {
        if (resetInterval === void 0) { resetInterval = false; }
        if (!this.swipeDisabled && this.isIndexValid(this.propIndex + 1)) {
            this.showItem(this.propIndex + 1, resetInterval);
        }
    };
    MCarousel.prototype.showItem = function (index, resetInterval) {
        this.propIndex = index;
        if (resetInterval) {
            this.resetInterval();
        }
    };
    MCarousel.prototype.resetInterval = function () {
        var _this = this;
        if (this.interval) {
            clearInterval(this.updateInterval);
            this.updateInterval = setInterval(function () {
                _this.showNextItem(true);
            }, this.interval);
        }
    };
    __decorate([
        Prop()
    ], MCarousel.prototype, "index", void 0);
    __decorate([
        Prop({ default: 0 })
    ], MCarousel.prototype, "interval", void 0);
    __decorate([
        Prop()
    ], MCarousel.prototype, "keyboardNavigable", void 0);
    __decorate([
        Prop({ default: 0 })
    ], MCarousel.prototype, "margin", void 0);
    __decorate([
        Prop({ default: false })
    ], MCarousel.prototype, "swipeDisabled", void 0);
    __decorate([
        Watch('keyboardNavigable')
    ], MCarousel.prototype, "toggleKeyboardNavigation", null);
    MCarousel = __decorate([
        WithRender,
        Component({
            components: (_a = {},
                _a[TOUCH_NAME] = MTouch,
                _a[CAROUSEL_ITEM_NAME] = MCarouselItem,
                _a)
        })
    ], MCarousel);
    return MCarousel;
}(Vue));
export { MCarousel };
var CarouselPlugin = {
    install: function (v) {
        v.use(TouchPlugin);
        v.component(CAROUSEL_ITEM_NAME, MCarouselItem);
        v.component(CAROUSEL_NAME, MCarousel);
    }
};
export default CarouselPlugin;
//# sourceMappingURL=carousel.js.map