// #region Imports
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { RendererServiceLocator } from '../../../../Dom/Renderer';
import { Slottable } from '../../../Behaviors/Slottable';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Orientation } from '../../../Types/Orientation';
import { SelectorElement } from '../Abstracts/Selector/SelectorElement';
import { carousel2ElementTemplate } from './Carousel2ElementTemplate';
import { CarouselItem2Element } from './CarouselItem2Element';
import { carousel2ElementJoyStyle } from './Themes/Carousel2Element.Joy';
import { carousel2ElementMemphisStyle } from './Themes/Carousel2Element.Memphis';
import { carousel2ElementCosmopolitanStyle } from './Themes/Carousel2Element.Cosmopolitan';
import { Themeable } from '../../../Behaviors/Themeable';
// #endregion
let Carousel2Element = class Carousel2Element extends Themeable(Slottable(SelectorElement)) {
    // #region Fields
    _page;
    _numVisible;
    _numScroll;
    _orientation;
    _circular;
    _showIndicators;
    _showNavigators;
    _autoplayInterval;
    _totalShiftedItems = 0;
    _remainingItems = 0;
    _interval;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._page = 0;
        this._numVisible = 1;
        this._numScroll = 1;
        this._orientation = Orientation.Horizontal;
        this._circular = false;
        this._showIndicators = false;
        this._showNavigators = false;
        this._autoplayInterval = 0;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `{@link is}` property.
     * The `{@link is}` property represents natural name of this element.
     *
     * @public
     * @static
     * @override
     * @readonly
     */
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    static get is() {
        return 'mosaik-carousel-2';
    }
    /**
     * Gets or sets the `page` property.
     *
     * @public
     * @attr
     */
    get page() {
        return this._page;
    }
    set page(value) {
        if (this._page !== value) {
            this._page = value;
            this.requestUpdate('page');
        }
    }
    /**
     * Gets or sets the `numVisible` property.
     *
     * @public
     * @attr
     */
    get numVisible() {
        return this._numVisible;
    }
    set numVisible(value) {
        if (this._numVisible !== value) {
            this._numVisible = value;
            this.requestUpdate('numVisible');
        }
    }
    /**
     * Gets or sets the `numScroll` property.
     *
     * @public
     * @attr
     */
    get numScroll() {
        return this._numScroll;
    }
    set numScroll(value) {
        if (this._numScroll !== value) {
            this._numScroll = value;
            this.requestUpdate('numScroll');
        }
    }
    /**
     * Gets or sets the `orientation` property.
     *
     * @public
     * @attr
     */
    get orientation() {
        return this._orientation;
    }
    set orientation(value) {
        if (this._orientation !== value) {
            this._orientation = value;
            this.requestUpdate('orientation');
        }
    }
    /**
     * Gets or sets the `circular` property.
     *
     * @public
     * @attr
     */
    get circular() {
        return this._circular;
    }
    set circular(value) {
        if (this._circular !== value) {
            this._circular = value;
            this.requestUpdate('circular');
        }
    }
    /**
     * Gets or sets the `showIndicators` property.
     *
     * @public
     * @attr
     */
    get showIndicators() {
        return this._showIndicators;
    }
    set showIndicators(value) {
        if (this._showIndicators !== value) {
            this._showIndicators = value;
            this.requestUpdate('showIndicators');
        }
    }
    /**
     * Gets or sets the `showNavigators` property.
     *
     * @public
     * @attr
     */
    get showNavigators() {
        return this._showNavigators;
    }
    set showNavigators(value) {
        if (this._showNavigators !== value) {
            this._showNavigators = value;
            this.requestUpdate('showNavigators');
        }
    }
    /**
     * Gets or sets the `autoplayInterval` property.
     *
     * @public
     * @attr
     */
    get autoplayInterval() {
        return this._autoplayInterval;
    }
    set autoplayInterval(value) {
        if (this._autoplayInterval !== value) {
            this._autoplayInterval = value;
            this.requestUpdate('autoplayInterval');
        }
    }
    // #endregion
    // #region Methods
    onSlotChanges(slotName) {
        super.onSlotChanges(slotName);
        if (!slotName) {
            const elements = this.getSlotAssignments('')
                .filter((x) => x instanceof CarouselItem2Element);
            for (const [i, e] of elements.entries()) {
                e.ariaHidden = this._totalShiftedItems * -1 !== i ? 'true' : null;
                e.ariaLabel = this.ariaSlideNumber(i);
                e.ariaRoleDescription = this.ariaSlideLabel();
                RendererServiceLocator.current.addClass(e, 'p-carousel-item');
            }
        }
    }
    firstUpdated() {
        if (this.autoplayInterval) {
            this.startAutoplay();
        }
    }
    updated(changedProperties) {
        // if (changedProperties.has('value')) {
        //     if (this.circular && this.items) {
        //         this.setCloneItems();
        //     }
        // }
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.stopAutoplay();
    }
    isVertical() {
        return this.orientation === 'vertical';
    }
    isCircular() {
        return (this.circular && this.items && this.items.length >= this.numVisible) ?? false;
    }
    isForwardNavDisabled() {
        return !this.items || (this.page >= this.totalDots() - 1 && !this.isCircular());
    }
    isBackwardNavDisabled() {
        return !this.items || (this.page <= 0 && !this.isCircular());
    }
    ariaPrevButtonLabel() {
        return 'Previous Page';
    }
    ariaNextButtonLabel() {
        return 'Next Page';
    }
    ariaSlideLabel() {
        return 'Slide';
    }
    ariaSlideNumber(value) {
        return `Slide ${value}`;
    }
    ariaPageLabel(value) {
        return `Page ${value}`;
    }
    navForward() {
        if (this.isCircular() || this.page < this.totalDots() - 1) {
            this.step(-1);
        }
        if (this.autoplayInterval) {
            this.stopAutoplay();
        }
    }
    navBackward() {
        if (this.isCircular() || this.page > 0) {
            this.step(1);
        }
        if (this.autoplayInterval) {
            this.stopAutoplay();
        }
    }
    onDotClick(index) {
        if (this.autoplayInterval) {
            this.stopAutoplay();
        }
        this.page = index;
        this._totalShiftedItems = this.numScroll * index * -1;
        this.requestUpdate();
    }
    onTransitionEnd() {
        // Handle transition end logic
    }
    startAutoplay() {
        this._interval = setInterval(() => {
            if (this.page === this.totalDots() - 1) {
                this.step(-1, 0);
            }
            else {
                this.step(-1, this.page + 1);
            }
        }, this.autoplayInterval);
    }
    stopAutoplay() {
        if (this._interval) {
            clearInterval(this._interval);
            this._interval = null;
        }
    }
    step(dir, page) {
        let totalShiftedItems = this._totalShiftedItems;
        if (page != null) {
            totalShiftedItems = this.numScroll * page * -1;
        }
        else {
            totalShiftedItems += this.numScroll * dir;
        }
        if (this.isCircular() && this.page === 0 && dir === 1) {
            totalShiftedItems = 0;
            page = this.totalDots() - 1;
        }
        this._totalShiftedItems = totalShiftedItems;
        this.page = page != null ? page : this.page + dir;
        this.requestUpdate();
    }
    totalDots() {
        const count = this.items
            ? Math.ceil((this.items.length - this.numVisible) / this.numScroll) + 1
            : 0;
        return count;
    }
};
__decorate([
    Attribute({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], Carousel2Element.prototype, "page", null);
__decorate([
    Attribute({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], Carousel2Element.prototype, "numVisible", null);
__decorate([
    Attribute({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], Carousel2Element.prototype, "numScroll", null);
__decorate([
    Attribute({ type: Orientation }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], Carousel2Element.prototype, "orientation", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], Carousel2Element.prototype, "circular", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], Carousel2Element.prototype, "showIndicators", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], Carousel2Element.prototype, "showNavigators", null);
__decorate([
    Attribute({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], Carousel2Element.prototype, "autoplayInterval", null);
Carousel2Element = __decorate([
    Component({
        selector: 'mosaik-carousel-2',
        template: carousel2ElementTemplate,
        themes: {
            joy: carousel2ElementJoyStyle,
            memphis: carousel2ElementMemphisStyle,
            cosmopolitan: carousel2ElementCosmopolitanStyle
        },
        imports: []
    }),
    __metadata("design:paramtypes", [])
], Carousel2Element);
export { Carousel2Element };
//# sourceMappingURL=Carousel2Element.js.map