// Stencil
import { h } from "@stencil/core";
export class CompositionList {
    constructor() {
        // Internal
        this.compositionSlider = null;
        // Props
        this.elementWidth = 0; // The width of a tour or a list
        this.listTitle = '';
        // States
        this.sliderOptions = null;
        this.randomId = Math.random() * 10000;
    }
    ////////////////////////////////////////////////////////////////
    // Life Cycle
    ////////////////////////////////////////////////////////////////
    /**
     * Override
     */
    componentDidLoad() {
        this.compositionSlider = this.getCompositionSlider();
        this.sliderOptions = this.getSliderOptions();
    }
    ////////////////////////////////////////////////////////////////
    // Public Methods
    ////////////////////////////////////////////////////////////////
    /**
     * Update the slider (must be called when an element has been added/or deleted)
     */
    async updateSlider() {
        this.compositionSlider.update();
        this.getCompositionSlider().stopAutoplay();
    }
    ////////////////////////////////////////////////////////////////
    // User Interactions
    ////////////////////////////////////////////////////////////////
    /**
     * The user wants to display the previous composition
     */
    previousComposition() {
        this.compositionSlider.slidePrev();
    }
    /**
    * The user wants to display the next composition
    */
    nextComposition() {
        this.compositionSlider.slideNext();
    }
    ////////////////////////////////////////////////////////////////
    // Private Methods
    ////////////////////////////////////////////////////////////////
    /**
     * Return an object containing the tour slider options
     */
    getSliderOptions() {
        return {
            width: this.elementWidth,
            spaceBetween: 8,
        };
    }
    ////////////////////////////////////////////////////////////////
    // Getters / Setters
    ////////////////////////////////////////////////////////////////
    /**
     * Return the Content slider
     */
    getCompositionSlider() {
        return document.getElementById('composition-slider' + this.randomId);
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("div", { class: 'main-container' },
            h("div", { class: 'header-container' },
                h("p", { class: 'list-title' }, this.listTitle),
                h("div", { class: 'button-container' },
                    h("ion-button", { onClick: () => this.previousComposition(), fill: 'clear' },
                        h("ion-icon", { color: 'dark', name: 'ios-arrow-back' })),
                    h("ion-button", { onClick: () => this.nextComposition(), fill: 'clear' },
                        h("ion-icon", { color: 'dark', name: 'ios-arrow-forward' })))),
            h("div", { class: 'list-container' },
                h("ion-slides", { id: 'composition-slider' + this.randomId, options: this.sliderOptions },
                    h("slot", null)))));
    }
    static get is() { return "composition-list"; }
    static get originalStyleUrls() { return {
        "$": ["composition-list.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["composition-list.css"]
    }; }
    static get properties() { return {
        "elementWidth": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "element-width",
            "reflect": false,
            "defaultValue": "0"
        },
        "listTitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "list-title",
            "reflect": false,
            "defaultValue": "''"
        }
    }; }
    static get states() { return {
        "sliderOptions": {},
        "randomId": {}
    }; }
    static get methods() { return {
        "updateSlider": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "Update the slider (must be called when an element has been added/or deleted)",
                "tags": []
            }
        }
    }; }
}
