// Stencil
import { h } from "@stencil/core";
export class MapTutorial {
    constructor() {
        // Internal
        this.compositionSlider = null;
        this.slideTitles = [];
    }
    ////////////////////////////////////////////////////////////////
    // Life Cycle
    ////////////////////////////////////////////////////////////////
    /**
     * Override
     */
    componentDidLoad() {
        setTimeout(() => {
            const slides = this.getTutorialSlider();
            if (slides !== null)
                slides.update();
        }, 1000);
    }
    ////////////////////////////////////////////////////////////////
    // User interactions
    ////////////////////////////////////////////////////////////////
    /**
    * Trigger the next slide
    */
    slideNext() {
        this.getTutorialSlider().slideNext();
    }
    /**
     * Emit an event to close the notification
     */
    closeTutorial() {
        this.close.emit();
    }
    ////////////////////////////////////////////////////////////////
    // Utils
    ////////////////////////////////////////////////////////////////
    /**
     * Get the Slides component from the DOM
     */
    getTutorialSlider() {
        return document.getElementById('tutorial-slider');
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("div", { class: 'main-container' },
            h("ion-slides", { id: "tutorial-slider", class: "slider" },
                h("ion-slide", null,
                    h("div", { class: 'slide-container' },
                        h("ion-text", { color: 'dark' },
                            h("p", { class: 'notification-message single-notification' }, this.slideTitles[0])),
                        h("ion-button", { color: 'secondary', fill: 'clear', size: 'large', class: 'next-button', onClick: () => this.slideNext() },
                            this.nextButtonLabel,
                            h("ion-icon", { name: 'arrow-forward', color: 'secondary' })))),
                h("ion-slide", null,
                    h("div", { class: 'slide-container' },
                        h("ion-item", { class: 'image-text-sub-container' },
                            h("img", { src: 'assets/icons/main-place-marker.png' }),
                            h("ion-text", { color: 'dark' },
                                h("p", { class: 'notification-message' }, this.slideTitles[1]))),
                        h("ion-button", { color: 'secondary', fill: 'clear', size: 'large', class: 'next-button', onClick: () => this.slideNext() },
                            this.nextButtonLabel,
                            h("ion-icon", { name: 'arrow-forward', color: 'secondary' })))),
                h("ion-slide", null,
                    h("div", { class: 'slide-container' },
                        h("ion-item", { class: 'image-text-sub-container' },
                            h("img", { src: 'assets/icons/content/itinerary-content-icon.svg' }),
                            h("ion-text", { color: 'dark' },
                                h("p", { class: 'notification-message' }, this.slideTitles[2]))),
                        h("ion-button", { color: 'secondary', fill: 'clear', size: 'large', class: 'next-button', onClick: () => this.slideNext() },
                            this.nextButtonLabel,
                            h("ion-icon", { name: 'arrow-forward', color: 'secondary' })))),
                h("ion-slide", null,
                    h("div", { class: 'slide-container' },
                        h("ion-text", { color: 'dark' },
                            h("p", { class: 'notification-message' }, this.slideTitles[3])),
                        h("ion-button", { color: 'secondary', fill: 'clear', size: 'large', class: 'next-button', onClick: () => this.slideNext() },
                            this.nextButtonLabel,
                            h("ion-icon", { name: 'arrow-forward', color: 'secondary' })))),
                h("ion-slide", null,
                    h("div", { class: 'slide-container' },
                        h("ion-item", { class: 'image-text-sub-container' },
                            h("img", { src: 'assets/icons/starting-point-icon.png' }),
                            h("ion-text", { color: 'dark' },
                                h("p", { class: 'notification-message' }, this.slideTitles[4]))),
                        h("ion-button", { color: 'secondary', fill: 'clear', size: 'large', class: 'next-button', onClick: () => this.slideNext() },
                            this.nextButtonLabel,
                            h("ion-icon", { name: 'arrow-forward', color: 'secondary' })))),
                h("ion-slide", null,
                    h("div", { class: 'slide-container' },
                        h("ion-item", { class: 'image-text-sub-container' },
                            h("ion-icon", { color: 'secondary', name: 'locate', class: 'demo-icon' }),
                            h("ion-text", { color: 'dark' },
                                h("p", { class: 'notification-message' }, this.slideTitles[5]))),
                        h("ion-button", { color: 'secondary', fill: 'clear', size: 'large', class: 'close-button', onClick: () => this.closeTutorial() }, this.closeButtonLabel))))));
    }
    static get is() { return "map-tutorial"; }
    static get originalStyleUrls() { return {
        "$": ["map-tutorial.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["map-tutorial.css"]
    }; }
    static get properties() { return {
        "nextButtonLabel": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "next-button-label",
            "reflect": false
        },
        "closeButtonLabel": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "close-button-label",
            "reflect": false
        },
        "slideTitles": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "string[]",
                "resolved": "string[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "[]"
        }
    }; }
    static get events() { return [{
            "method": "close",
            "name": "close",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }]; }
}
