// Stencil
import { h } from "@stencil/core";
export class PresentationPage {
    constructor() {
        // Properties
        this.logo = 'assets/logo.png';
        // States
        this.slides = [];
    }
    ////////////////////////////////////////////////////////////////
    // Life Cycle
    ////////////////////////////////////////////////////////////////
    componentWillLoad() {
        // TO DELETE. Only for test purposes.
        this.slides = [
            {
                title: 'Explore',
                subtitle: 'The city wisely, on your own',
                backgroundImage: 'http://sis.ac/wp-content/uploads/2017/10/paris.jpg',
                alt: 'Logo of Deep On sights',
                overlay: 60,
                buttonTitle: 'Start my experience'
            },
            {
                title: 'Be guided',
                subtitle: 'by a local expert and our smart map',
                backgroundImage: 'https://images.pexels.com/photos/462680/pexels-photo-462680.jpeg?w=940&h=650&dpr=2&auto=compress&cs=tinysrgb',
                alt: 'Logo of Deep On sights',
                overlay: 60,
                buttonTitle: 'Start my experience'
            }
        ];
    }
    ////////////////////////////////////////////////////////////////
    // Action Methods
    ////////////////////////////////////////////////////////////////
    /**
     * The user clicked on the Skip button
     * @param event
     */
    skip() {
        this.onSkip.emit();
    }
    /**
     * The user clicked on the logo
     * @param event
     */
    logoClick() {
        this.onLogoClicked.emit();
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("span", null,
            h("span", { class: "header-container" },
                this.logo
                    ?
                        h("img", { src: this.logo, alt: this.altLogo, class: 'logo-image', onInput: () => this.logoClick() })
                    :
                        null,
                h("ion-button", { fill: 'clear', size: 'large', color: 'light', class: 'close-button', onInput: () => this.skip() },
                    h("ion-icon", { name: "close-outline", color: 'light' }, " "),
                    "SKIP")),
            h("ion-slides", { pager: false },
                this.slides.map(slide => h("ion-slide", null,
                    h("presentation-slide", { slideTitle: slide.title, slideSubtitle: slide.subtitle, "background-image": slide.backgroundImage, alt: slide.alt, overlay: slide.overlay, "button-title": slide.buttonTitle }))),
                ";")));
    }
    static get is() { return "presentation-page"; }
    static get originalStyleUrls() { return {
        "$": ["presentation-page.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["presentation-page.css"]
    }; }
    static get properties() { return {
        "logo": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "logo",
            "reflect": false,
            "defaultValue": "'assets/logo.png'"
        },
        "altLogo": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "alt-logo",
            "reflect": false
        }
    }; }
    static get states() { return {
        "slides": {}
    }; }
    static get events() { return [{
            "method": "onLogoClicked",
            "name": "onLogoClicked",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "onSkip",
            "name": "onSkip",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
}
