// Stencil
import { h } from "@stencil/core";
// Tools
import { MediaTool } from '../../../tools/media-tool';
export class FlipCardRow {
    constructor() {
        this.index = 0;
        this.showIndex = true;
        this.cardToText = 'left'; // left or right
        this.frontIconColor = 'light';
        this.backIconColor = 'dark';
        this.showBackFlipButton = true;
    }
    ////////////////////////////////////////////////////////////////
    // Utils
    ////////////////////////////////////////////////////////////////
    /**
     * Number to string
     * @param count
     */
    numberToString(count) {
        const str = (count + 1).toString();
        return str.length == 1 ? ('0' + str) : str;
    }
    /**
     * Text
     */
    text() {
        return h("ion-col", { class: 'text-col' },
            h("div", { class: 'text-container' },
                h("h3", { class: 'count-text' }, this.showIndex ? this.numberToString(this.index) : this.row.title),
                h("p", { class: 'title-text' }, this.showIndex ? this.row.title : this.row.subTitle),
                h("p", { class: 'subtitle-text' }, this.showIndex ? this.row.subTitle : ''),
                h("p", { class: 'footer' }, this.row.footer)));
    }
    /**
     * Flip card
     */
    card() {
        return h("ion-col", null,
            h("flip-card", { frontImage: MediaTool.imageS(this.row.image), frontIconColor: this.frontIconColor, backIconColor: this.backIconColor, demoOnStart: true, showBackFlipButton: this.showBackFlipButton, details: this.row.details }));
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("ion-row", null,
            h("ion-col", null,
                h("ion-row", null,
                    this.cardToText === 'left'
                        ? this.card()
                        : this.text(),
                    this.cardToText === 'right'
                        ? this.card()
                        : this.text()))));
    }
    static get is() { return "flip-card-row"; }
    static get originalStyleUrls() { return {
        "$": ["flip-card-row.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["flip-card-row.css"]
    }; }
    static get properties() { return {
        "row": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "Row",
                "resolved": "Row",
                "references": {
                    "Row": {
                        "location": "import",
                        "path": "./Row"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "index": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "index",
            "reflect": false,
            "defaultValue": "0"
        },
        "showIndex": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "show-index",
            "reflect": false,
            "defaultValue": "true"
        },
        "cardToText": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "card-to-text",
            "reflect": false,
            "defaultValue": "'left'"
        },
        "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": "'dark'"
        },
        "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"
        }
    }; }
}
