// Models
import { MediaElement } from '../../../models/media/media-model';
// Stencil
import { h } from "@stencil/core";
// Tools
import { MediaTool } from '../../../tools/media-tool';
export class MainPlaceAnnouncement {
    constructor() {
        // Props
        this.image = new MediaElement();
        this.placeTitle = '';
        this.placeIndex = 1;
        this.placeTotalCount = 1;
        this.placeId = '';
        this.buttonText = this.placeIndex === 1 ? 'Discover the place' : 'Discover';
        // States
        this.clicked = false;
    }
    ////////////////////////////////////////////////////////////////
    // User Interactions
    ////////////////////////////////////////////////////////////////
    /**
     * Click on the title
     */
    onClick() {
        this.mainPlaceClicked.emit(this.placeId);
        this.clicked = true;
    }
    ////////////////////////////////////////////////////////////////
    // Utils
    ////////////////////////////////////////////////////////////////
    /**
     * Replace .undefined extension by .jpg
     * Fix a bug
     * @param imageUrl
     */
    fixImage(imageUrl) {
        return imageUrl.replace('.undefined', '.jpg');
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("div", { class: 'main-container' },
            h("div", { class: 'main-subcontainer' },
                h("div", { style: {
                        backgroundImage: 'url(' + this.fixImage(MediaTool.imageM(this.image)) + ')',
                        backgroundColor: 'rgba(0,0,0,' + this.image.overlay / 100 + ')'
                    }, onClick: () => this.onClick(), class: 'picture-container' },
                    h("div", { class: 'picture-subcontainer' },
                        h("h3", { class: 'place-title' }, this.placeTitle)),
                    h("ion-fab-button", { color: 'secondary', class: 'inside-button ' + (this.clicked ? '' : 'heartbeat-button'), onClick: () => this.onClick() },
                        h("ion-icon", { name: 'play' })),
                    h("p", { class: 'place-index' },
                        this.placeIndex,
                        "/",
                        this.placeTotalCount)))));
    }
    static get is() { return "main-place-announcement"; }
    static get originalStyleUrls() { return {
        "$": ["main-place-announcement.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["main-place-announcement.css"]
    }; }
    static get properties() { return {
        "image": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "MediaElement",
                "resolved": "MediaElement",
                "references": {
                    "MediaElement": {
                        "location": "import",
                        "path": "../../../models/media/media-model"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "new MediaElement()"
        },
        "placeTitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "place-title",
            "reflect": false,
            "defaultValue": "''"
        },
        "placeIndex": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "place-index",
            "reflect": false,
            "defaultValue": "1"
        },
        "placeTotalCount": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "place-total-count",
            "reflect": false,
            "defaultValue": "1"
        },
        "placeId": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "place-id",
            "reflect": false,
            "defaultValue": "''"
        },
        "buttonText": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "button-text",
            "reflect": false,
            "defaultValue": "this.placeIndex === 1 ? 'Discover the place' : 'Discover'"
        }
    }; }
    static get states() { return {
        "clicked": {}
    }; }
    static get events() { return [{
            "method": "mainPlaceClicked",
            "name": "mainPlaceClicked",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            }
        }]; }
}
