import { Component, h, Event, State, Prop } from '@stencil/core';
import Portis from '@portis/web3';
import { changeNetwork, fetchSkillWallet } from '../../utils/utils';
import { ethers } from 'ethers';
export class LoginMenu {
  constructor() {
    this.isLoading = false;
    this.buttonClass = 'disabled';
    this.handleMetamaskClick = async () => {
      this.isLoading = true;
      const { ethereum } = window;
      try {
        await changeNetwork();
        await ethereum.request({ method: 'eth_requestAccounts' });
        this.web3Provider = new ethers.providers.Web3Provider(window.ethereum);
        await fetchSkillWallet(this.web3Provider, ethereum.selectedAddress);
        this.closeModalOnLogin.emit();
      }
      catch (error) {
        this.isLoading = false;
        alert(error);
      }
    };
    this.handlePortisClick = async () => {
      this.isLoading = true;
      try {
        const portis = new Portis('b86287a9-e792-4722-9487-477419f4470f', {
          nodeUrl: 'https://matic-mumbai.chainstacklabs.com/',
          chainId: '80001',
        });
        this.web3Provider = new ethers.providers.Web3Provider(portis.provider);
        const addresses = await this.web3Provider.listAccounts();
        await fetchSkillWallet(this.web3Provider, addresses[0]);
        this.closeModalOnLogin.emit();
      }
      catch (error) {
        alert(error);
      }
      this.isLoading = false;
    };
  }
  handleNewScreen(text) {
    this.showNewScreen.emit(text);
  }
  render() {
    return (h("div", { class: "modal-window-child" },
      this.isLoading ? h("div", { class: "item" },
        h("h2", null, "Loading"),
        h("i", { class: "loader two" })) : h("div", null),
      h("div", { class: "wallet-header login-menu" },
        h("h2", null, "Welcome back! \uD83D\uDE4C")),
      h("div", { class: "login-menu-buttons-container" },
        h("button", { onClick: () => this.handleMetamaskClick() },
          h("div", null,
            h("auth-image", { class: "metamask", image: 'https://skillwallet-demo-images.s3.us-east-2.amazonaws.com/metamask.svg' }),
            h("p", null, this.isPartner ? 'Login with Metamask' : 'Login with Metamask'))),
        h("button", { onClick: () => this.handlePortisClick() },
          h("div", null,
            h("auth-image", { class: "portis", image: 'https://skillwallet-demo-images.s3.us-east-2.amazonaws.com/portis_icon.svg' }),
            h("p", null, this.isPartner ? 'Use Your Password' : 'Use Your Password'))),
        h("button", { 
          // onClick={() => this.handleMetamaskClick()}
          disabled: true, class: this.buttonClass },
          h("div", null,
            h("p", null, this.isPartner ? 'Scan QR Code' : 'Scan QR Code'))))));
  }
  static get is() { return "login-menu"; }
  static get properties() { return {
    "isPartner": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Boolean",
        "resolved": "Boolean",
        "references": {
          "Boolean": {
            "location": "global"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "web3Provider": {
      "type": "any",
      "mutable": true,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "web-3-provider",
      "reflect": false
    }
  }; }
  static get states() { return {
    "isLoading": {},
    "buttonClass": {}
  }; }
  static get events() { return [{
      "method": "showNewScreen",
      "name": "showNewScreen",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "closeModalOnLogin",
      "name": "closeModalOnLogin",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
}
