import { Component, h, Event, State, Prop } from '@stencil/core';
import { changeNetwork, fetchSkillWallet } from '../../utils/utils';
import { ethers } from 'ethers';
import Portis from '@portis/web3';
export class UsersModal {
  constructor() {
    this.isLoading = false;
    this.handleMetamaskClick = async () => {
      this.isLoading = true;
      const { ethereum } = window;
      try {
        await changeNetwork();
        await ethereum.request({ method: 'eth_requestAccounts' });
        console.log(ethereum);
        // const web3Provider = new ethers.providers.Web3Provider(window.ethereum);
        const portis = new Portis('b86287a9-e792-4722-9487-477419f4470f', {
          nodeUrl: 'https://matic-mumbai.chainstacklabs.com/',
          chainId: '80001',
        });
        const web3Provider = new ethers.providers.Web3Provider(portis.provider);
        const addresses = await web3Provider.listAccounts();
        await fetchSkillWallet(web3Provider, addresses[0]);
        this.closeModalOnLogin.emit();
      }
      catch (error) {
        this.isLoading = false;
        alert(error);
      }
    };
  }
  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" },
        h("auth-image", { class: "white-wallet", image: 'https://skillwallet-demo-images.s3.us-east-2.amazonaws.com/wallet-white.svg' }),
        h("h2", null, this.isPartner ? 'I am a...' : 'Login with')),
      h("div", { class: "wallet-modal-button users-modal" },
        h("button", { onClick: () => this.showLoginMenu.emit() },
          h("auth-image", null),
          h("p", null, this.isPartner ? 'Existing Partner' : 'SkillWallet')),
        h("button", { onClick: () => this.handleNewScreen(null) },
          h("auth-image", { image: 'https://skillwallet-demo-images.s3.us-east-2.amazonaws.com/plus-button-white.svg' }),
          h("p", null, this.isPartner ? 'New Partner' : 'New User')))));
  }
  static get is() { return "users-modal"; }
  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": ""
      }
    }
  }; }
  static get states() { return {
    "isLoading": {}
  }; }
  static get events() { return [{
      "method": "showNewScreen",
      "name": "showNewScreen",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "showLoginMenu",
      "name": "showLoginMenu",
      "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": {}
      }
    }]; }
}
