/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { Host, } from "@stencil/core";
import { h } from "../../utils/renderer";
/**
 * Showcase up to 6 pieces of content in a slide-show format.
 *
 * @status new
 * @version 8.0.0
 *
 * @part base - The base element of the carousel.
 * @part title - The element containing the title of the carousel.
 * @part slides - The slides element of the carousel.
 * @part pagination - The element containing the pagination buttons.
 *
 * @slot title - The title of the carousel. Useful it you want more control over markup of the title.
 * @slot - The slides of the carousel. Should be used with `nano-slide` components exclusively.
 */
export class ContentCarousel {
    nanoSlides;
    flickity;
    host;
    slideCount = 0;
    slideOptions;
    activeSlide = 0;
    /** The title of the carousel. Alternatively use the `slot="title"` for more control over markup */
    carouselTitle;
    handleSlidesChange = () => {
        this.slideCount = this.host.querySelectorAll('nano-slide').length;
    };
    handleSlideCountChange() {
        if (this.slideCount > 2) {
            this.slideOptions = {
                wrapAround: true,
                cellAlign: 'left',
                friction: 0.4,
            };
        }
        else {
            this.slideOptions = {
                wrapAround: false,
                cellAlign: 'left',
                friction: 0.4,
            };
        }
    }
    handleSlideMove = async (_event) => {
        const flkty = await this.flickity;
        const modulo = (num, div) => ((num % div) + div) % div;
        const cells = flkty.cells;
        // applies a relative '--distance' CSS variable to each cell,
        // with '0' being the current cell.
        // this is used (in card-carousel.scss) to calculate an opacity
        // which is then applied (in card-carousel.light-dom.scss) to the card contents
        for (const cell of cells) {
            let flkX = flkty.x;
            if (flkty.options.wrapAround && flkty.cells.length > 1) {
                flkX = modulo(flkX, flkty.slideableWidth);
                flkX = flkX - flkty.slideableWidth;
            }
            let x = ((cell.target + flkX) * -1) / 3;
            if (cell.shift < 0) {
                x = ((cell.target - flkty.slideableWidth + flkX) * -1) / 3;
            }
            else if (cell.shift > 0) {
                x = ((cell.target + (flkX + flkty.slideableWidth)) * -1) / 3;
            }
            const animAmount = Math.abs((x / cell.size.width) * 100);
            cell.element.style.setProperty('--distance', animAmount.toString());
        }
    };
    isActive(num) {
        if (num === this.activeSlide) {
            return true;
        }
        return false;
    }
    connectedCallback() {
        this.handleSlidesChange();
    }
    render() {
        return (h(Host, { key: 'a4c1951a78d48ad8bcf004ab0bfeef4694acc014', class: "nano-card-carousel" }, h("div", { key: 'ea1610b4be02f8c44118048326911e3e20be2b63', class: "base", part: "base" }, h("div", { key: '441ec188780b331b936659ec7c9d3bf7d0644f92', class: "header" }, h("div", { key: '59e90ace9b7672093700b9919728e94fb25a3ad3', class: "title", part: "title" }, h("slot", { key: '5b531e2dc1a7d47ac837d5074926452d032cbbb8', name: "title" }, this.carouselTitle)), this.slideCount > 1 && (h("div", { key: 'd3efcf6fc709e275cd0d2e0c29010428ca367220', class: "pagination", part: "pagination" }, Array.from({ length: this.slideCount }).map((_, index) => (h("button", { key: index, class: {
                'pagination-btn': true,
                'pagination-btn--active': this.isActive(index),
            }, onClick: () => {
                if (!this.nanoSlides || this.isActive(index))
                    return;
                this.nanoSlides.slideTo(index);
            } }, h("span", { class: "pagination-btn__label" }, "Go to slide ", index + 1))))))), h("nano-slides", { key: '219ee21ab7c302445f76f0f088952de55204ecde', pager: false, options: this.slideOptions, navbtns: true, part: "slides", onNanoSlidesScroll: this.handleSlideMove, onNanoSlidesSelect: (e) => (this.activeSlide = e.detail), ref: (slides) => {
                this.nanoSlides = slides;
                this.flickity = slides.getflickity();
            } }, h("slot", { key: '3b6f7d99d7560d5d8f6d2d7cc32d691782ba5b84', onSlotchange: this.handleSlidesChange })))));
    }
    static get is() { return "nano-card-carousel"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["card-carousel.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["card-carousel.css"]
        };
    }
    static get properties() {
        return {
            "carouselTitle": {
                "type": "string",
                "attribute": "carousel-title",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The title of the carousel. Alternatively use the `slot=\"title\"` for more control over markup"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "slideCount": {},
            "slideOptions": {},
            "activeSlide": {}
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "slideCount",
                "methodName": "handleSlideCountChange"
            }];
    }
}
