// Stencil
import { h } from "@stencil/core";
// Tools
import { MediaTool } from '../../../tools/media-tool';
export class HaveALookContent {
    constructor() {
        // Props
        this.name = "Have a look";
        this.contentTitle = '';
        this.description = '';
        this.buttonText = 'Find me';
        this.showTutorial = false;
        this.tutorialMessage = '';
        // States
        this.showInfo = false;
        this.closeModalClicked = false;
    }
    ////////////////////////////////////////////////////////////////
    // User Interactions
    ////////////////////////////////////////////////////////////////
    /**
     * Open the Modal
     */
    openModal() {
        this.showInfo = true;
    }
    /**
     * Close the Modal
     */
    closeModal() {
        this.closeModalClicked = true;
        setTimeout(() => {
            this.showInfo = false;
            setTimeout(() => {
                this.closeModalClicked = false;
            }, 500);
        }, 500);
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("div", null,
            h("div", { class: 'main-container' },
                h("div", { class: 'header-container' },
                    h("p", { class: 'header-text' }, this.name)),
                h("flip-card", { frontImage: MediaTool.imageL(this.image), backImage: MediaTool.imageL(this.backImage), showBackImage: true, demoOnStart: false, onFrontFaceFlipped: () => { this.closeModal(); }, class: 'image-container' },
                    this.showInfo &&
                        h("div", { class: 'content-container appear' + (this.closeModalClicked ? ' disappear' : ''), onClick: () => { this.closeModal(); } },
                            h("p", { class: 'title' }, this.contentTitle),
                            h("p", { class: 'description' }, this.description)),
                    !this.showInfo &&
                        h("ion-button", { color: "secondary", size: "small", class: 'info-button animated-button', onClick: () => { this.openModal(); } },
                            h("ion-icon", { name: "eye", color: "light" })))),
            this.showTutorial && this.showInfo &&
                h("ion-item", { class: "tutorial-item" },
                    h("ion-label", { color: "dark" }, this.tutorialMessage),
                    h("ion-icon", { name: "arrow-round-up", color: "dark" }))));
    }
    static get is() { return "have-a-look-content"; }
    static get originalStyleUrls() { return {
        "$": ["have-a-look-content.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["have-a-look-content.css"]
    }; }
    static get properties() { return {
        "name": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "name",
            "reflect": false,
            "defaultValue": "\"Have a look\""
        },
        "contentTitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "content-title",
            "reflect": false,
            "defaultValue": "''"
        },
        "description": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "description",
            "reflect": false,
            "defaultValue": "''"
        },
        "image": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "any[]",
                "resolved": "any[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "backImage": {
            "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": ""
            }
        },
        "buttonText": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "button-text",
            "reflect": false,
            "defaultValue": "'Find me'"
        },
        "showTutorial": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "show-tutorial",
            "reflect": false,
            "defaultValue": "false"
        },
        "tutorialMessage": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "tutorial-message",
            "reflect": false,
            "defaultValue": "''"
        }
    }; }
    static get states() { return {
        "showInfo": {},
        "closeModalClicked": {}
    }; }
}
