import { h } from "@stencil/core";
import { DataTestIdsEnum } from "../../../../constants/dataTestIds.enum";
import { processImgSrc } from "../../../../utils/processImgSrc";
const XPORTAL_APP_GALLERY_LINK = 'https://appgallery.huawei.com/app/C104325151';
const XPORTAL_APP_STORE_LINK = 'https://apps.apple.com/us/app/xportal/id1519405832';
const XPORTAL_PLAY_STORE_LINK = 'https://play.google.com/store/apps/details?id=com.elrond.maiar.wallet&hl=ro&pli=1';
const xPortalDownloadOptions = [
    { image: 'wallet-connect-flow-app-store.svg', link: XPORTAL_APP_STORE_LINK },
    { image: 'wallet-connect-flow-play-store.png', link: XPORTAL_PLAY_STORE_LINK },
    { image: 'wallet-connect-flow-app-gallery.png', link: XPORTAL_APP_GALLERY_LINK },
];
export class WalletConnectFlow {
    constructor() {
        this.qrCodeSvg = '';
        this.flipToggle = false;
    }
    handleFlipToggle(event) {
        event.preventDefault();
        event.stopPropagation();
        this.flipToggle = !this.flipToggle;
    }
    render() {
        return (h("div", { key: 'a5952ffb645c54e08eb04243c11a86a16604828f', class: { 'wallet-connect-flow': true, 'flipped': Boolean(this.flipToggle) } }, h("div", { key: 'd2a6e3ef691ff27dae03967cef647a9541f93908', class: "wallet-connect-flow-scan" }, h("div", { key: '1d77a24557ca09ba9a4ac90295eba02bd12811d1', class: "wallet-connect-flow-scan-qr" }, h("mvx-xportal-qr-code-preloader", { key: '6040dce8eacb78634e96927bef8b3f799f09f4d5', "data-testid": DataTestIdsEnum.walletConnectLoading }), h("div", { key: '88cef01d7fdb2381cb2a81940d9c76f7e3857a2e', class: { 'wallet-connect-flow-scan-qr-embed': true, 'visible': Boolean(this.qrCodeSvg) }, "data-testid": DataTestIdsEnum.walletConnectQrCode, innerHTML: this.qrCodeSvg })), h("div", { key: 'b8a998fe2c2e2061a2093c128bcc3049dad0354e', class: "wallet-connect-flow-scan-description", "data-testid": DataTestIdsEnum.walletConnetModalTitle }, "Scan this QR code with your app"), h("div", { key: '6232dd00888b50754ed2f95f979e80831c08a1f0', class: "wallet-connect-flow-scan-download" }, h("div", { key: '3336ddd9d9bbf56c5ece6a6e99c4f95ed1032216', class: "wallet-connect-flow-scan-download-wrapper" }, h("div", { key: '9df97629043fa45fefc31fddf15ce1c7f915de99', class: "wallet-connect-flow-scan-download-title" }, "Get the xPortal ", h("br", { key: '83b30d523148033ad41e7c8a5361634c4aff5003' }), " mobile app"), h("div", { key: 'e7f1ca83e5bf5b4e27d98e6c92ac9c5fb66df3a4', class: "wallet-connect-flow-scan-download-button", onClick: this.handleFlipToggle.bind(this) }, "Download now")), h("img", { key: 'd03c116a6c7d1e2b571ee7d0c827c46c1ee4b80e', src: processImgSrc('wallet-connect-flow-download.png'), class: "wallet-connect-flow-scan-download-image" }))), h("div", { key: 'bafde363258f660903b5e5fbb76a8c6237da6e44', class: "wallet-connect-flow-download" }, h("div", { key: '326ccd541b3da9c6a8746e46801ebf2bbb758f5e', class: "wallet-connect-flow-download-wrapper" }, h("mvx-xportal-download-qr-icon", { key: '38ddcb1ad3506fb667011cc485a8f7e4143c7e0b', class: "wallet-connect-flow-download-qr" }), h("div", { key: '6b97edb41f30dd865653ac5a2597c4077d8dad66', class: "wallet-connect-flow-download-description" }, "Scan this QR code on your phone ", h("br", { key: '49c3d48f44df0fcf748d145a76359a26217e6dd9' }), " to get the xPortal app"), h("div", { key: '496221d288f5e3f147a9c93368e3b15723092d5c', class: "wallet-connect-flow-download-return", onClick: this.handleFlipToggle.bind(this) }, "Connect xPortal")), h("div", { key: 'daf2cbe9e5e7e5490fb6623380becf037c14e6b0', class: "wallet-connect-flow-download-options" }, xPortalDownloadOptions.map(xPortalDownloadOption => (h("a", { class: "wallet-connect-flow-download-option", href: xPortalDownloadOption.link, target: "_blank", rel: "noreferrer" }, h("img", { src: processImgSrc(xPortalDownloadOption.image), class: "wallet-connect-flow-download-option-image" }))))))));
    }
    static get is() { return "mvx-wallet-connect-flow"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["wallet-connect-flow.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["wallet-connect-flow.css"]
        };
    }
    static get properties() {
        return {
            "qrCodeSvg": {
                "type": "string",
                "attribute": "qr-code-svg",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            }
        };
    }
    static get states() {
        return {
            "flipToggle": {}
        };
    }
}
//# sourceMappingURL=wallet-connect-flow.js.map
