// Stencil
import { h } from "@stencil/core";
export class FlipCard {
    constructor() {
        // Properties
        this.demoOnStart = true;
        this.demoDelayOnStart = 1500;
        this.demoDuration = 1500;
        this.switchCard = false;
        this.frontImage = '';
        this.showBackImage = false;
        this.showFrontFlipButton = true;
        this.showBackFlipButton = true;
        this.backImage = '';
        this.frontIconColor = 'light';
        this.backIconColor = 'light';
        // States
        this.flipped = false;
    }
    // Watch
    switch(newValue, oldValue) {
        if (!oldValue) {
            setTimeout(() => {
                this.flip();
            }, 1000);
        }
    }
    ////////////////////////////////////////////////////////////////
    // Life Cycle
    ////////////////////////////////////////////////////////////////
    /**
     * Override
     */
    componentDidLoad() {
        // Play a little demo if required
        if (this.demoOnStart) {
            setTimeout(() => {
                this.flip();
            }, this.demoDelayOnStart);
            setTimeout(() => {
                this.flip();
            }, (this.demoDuration + this.demoDelayOnStart));
        }
    }
    ////////////////////////////////////////////////////////////////
    // User Interactions
    ////////////////////////////////////////////////////////////////
    /**
     * The user flips the card by clicking on it
     */
    flip() {
        this.flipped = !this.flipped;
        this.flipped ? this.frontFaceFlipped.emit() : this.backFaceFlipped.emit();
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("div", { class: 'flip-container' + (this.flipped ? ' flipped' : ''), onClick: () => this.flip() },
            h("div", { class: 'flipper' },
                h("div", { style: { backgroundImage: 'url(' + this.frontImage + ')' }, class: 'front' }, this.showFrontFlipButton &&
                    h("ion-fab", { class: 'flip-button front-flip-button' },
                        h("ion-fab-button", { color: 'secondary' },
                            h("ion-icon", { name: 'redo', color: this.frontIconColor })))),
                this.showBackImage
                    ? h("div", { style: { backgroundImage: 'url(' + this.backImage + ')' }, class: 'back' }, this.showBackFlipButton
                        ? h("ion-fab", { class: 'flip-button back-flip-button' },
                            h("ion-fab-button", { color: 'secondary' },
                                h("ion-icon", { name: 'undo', color: this.frontIconColor })))
                        : '')
                    : h("div", { class: 'back' },
                        h("span", null, this.details),
                        h("span", { class: 'icon-span' }, this.showBackFlipButton &&
                            h("ion-fab", { class: 'flip-button back-flip-button' },
                                h("ion-fab-button", { color: 'secondary' },
                                    h("ion-icon", { name: 'undo', color: this.backIconColor }))))))));
    }
    static get is() { return "flip-card"; }
    static get originalStyleUrls() { return {
        "$": ["flip-card.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["flip-card.css"]
    }; }
    static get properties() { return {
        "demoOnStart": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "demo-on-start",
            "reflect": false,
            "defaultValue": "true"
        },
        "demoDelayOnStart": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "demo-delay-on-start",
            "reflect": false,
            "defaultValue": "1500"
        },
        "demoDuration": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "demo-duration",
            "reflect": false,
            "defaultValue": "1500"
        },
        "switchCard": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "switch-card",
            "reflect": false,
            "defaultValue": "false"
        },
        "frontImage": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "front-image",
            "reflect": false,
            "defaultValue": "''"
        },
        "showBackImage": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "show-back-image",
            "reflect": false,
            "defaultValue": "false"
        },
        "showFrontFlipButton": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "show-front-flip-button",
            "reflect": false,
            "defaultValue": "true"
        },
        "showBackFlipButton": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "show-back-flip-button",
            "reflect": false,
            "defaultValue": "true"
        },
        "backImage": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "back-image",
            "reflect": false,
            "defaultValue": "''"
        },
        "frontIconColor": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "front-icon-color",
            "reflect": false,
            "defaultValue": "'light'"
        },
        "backIconColor": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "back-icon-color",
            "reflect": false,
            "defaultValue": "'light'"
        },
        "details": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "details",
            "reflect": false
        }
    }; }
    static get states() { return {
        "flipped": {}
    }; }
    static get events() { return [{
            "method": "frontFaceFlipped",
            "name": "frontFaceFlipped",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }, {
            "method": "backFaceFlipped",
            "name": "backFaceFlipped",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }]; }
    static get watchers() { return [{
            "propName": "switchCard",
            "methodName": "switch"
        }]; }
}
