import { Component, h, Prop, State } from '@stencil/core';
import { getActivationNonce, generateMembershipNFT, drawCanvas, getLogo } from '../../utils/utils';
export class QRModal {
  constructor() {
    this.textKey = null;
    this.demoImg = new Image();
    this.logo = new Image();
  }
  async componentWillLoad() {
    this.tokenId = window.sessionStorage.getItem('tokenId');
    this.nonce = await getActivationNonce(+this.tokenId);
    if (this.tokenId)
      this.qrCodeContent = JSON.stringify({
        tokenId: this.tokenId,
        nonce: this.nonce,
        action: 0
      });
    console.log(this.qrCodeContent);
  }
  componentWillRender() {
    this.qrText = {
      skillwallet: [
        'Scan with your ',
        h("a", { href: "", key: 1, style: { textDecoration: 'underline', fontWeight: 'bold' } },
          "SkillWallet App",
          ' '),
        'to ',
        h("b", null, "Login"),
        ' to ',
        h("span", { style: { textDecoration: 'underline', fontWeight: 'bold' } }, this.community.name),
        '!',
      ],
      role: [
        'Now just scan with your ',
        h("a", { href: "", key: 1, style: { textDecoration: 'underline', fontWeight: 'bold' } },
          "SkillWallet App",
          ' '),
        ' & Verify your Membership',
      ],
    };
  }
  componentDidRender() {
    getLogo(this.logo, this.community);
    drawCanvas(this.canvas, this.demoImg, this.logo, this.community);
  }
  render() {
    return (h("div", { class: "qr-modal-window-child" },
      h("canvas", { id: "canvas", class: "hidden-element", ref: el => {
          this.canvas = el;
        } }),
      h("img", { class: "hidden-element", id: "test-demo-img", ref: el => {
          this.demoImg = el;
        } }),
      h("div", { class: "wallet-qr" },
        h("qr-code", { "output-mode": "SVG", contents: this.qrCodeContent })),
      h("div", { class: "wallet-text" },
        h("p", null, this.qrText[this.textKey]),
        h("button", { class: "small", onClick: () => generateMembershipNFT(this.canvas, this.demoImg, this.logo, this.community, this.roleSelected) }, "Generate Membership (TEST)"))));
  }
  static get is() { return "qr-modal"; }
  static get properties() { return {
    "textKey": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "text-key",
      "reflect": false,
      "defaultValue": "null"
    },
    "community": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "community",
      "reflect": false
    },
    "roleSelected": {
      "type": "any",
      "mutable": true,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "role-selected",
      "reflect": false
    }
  }; }
  static get states() { return {
    "canvas": {},
    "demoImg": {},
    "qrText": {},
    "nonce": {},
    "tokenId": {},
    "qrCodeContent": {}
  }; }
}
