import Portis from '@portis/web3';
import { Component, Event, h, State, Prop } from '@stencil/core';
import { changeNetwork } from '../../utils/utils';
import { ethers } from 'ethers';
import MetamasIcon from './assets/metamask.svg';
import PortisIcon from './assets/portis_icon.svg';
export class NewUser {
  constructor() {
    this.isAccount = null;
    this.buttonClass = 'disabled';
    this.handleMetamaskClick = async () => {
      await changeNetwork();
      const { ethereum } = window;
      try {
        await ethereum.request({ method: 'eth_requestAccounts' });
        this.isAccount = 'metamask';
        this.buttonClass = '';
        this.web3Provider = new ethers.providers.Web3Provider(window.ethereum);
      }
      catch (error) {
        this.onSkillwalletError.emit();
        alert(error);
      }
    };
    this.handlePortisClick = async () => {
      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);
        this.isAccount = 'portis';
        this.buttonClass = '';
      }
      catch (error) {
        this.onSkillwalletError.emit();
        alert(error);
      }
    };
  }
  componentWillLoad() {
    const { ethereum } = window;
    if (ethereum && ethereum.isMetaMask && ethereum.selectedAddress) {
      this.isAccount = 'metamask';
      this.buttonClass = 'intro-button';
      this.web3Provider = new ethers.providers.Web3Provider(window.ethereum);
      return;
    }
  }
  handleUserDetailsClick() {
    this.showUserDetails.emit(this.web3Provider);
  }
  render() {
    return (h("div", { class: "new-user-modal-window-child" },
      h("div", { class: "new-user-header" },
        this.isPartner ?
          h("h2", { style: { textDecoration: 'none', fontWeight: '500' } }, "Hello, Partner!") :
          h("h2", null,
            "Welcome to ",
            h("span", { style: { textDecoration: 'underline' } },
              this.community ? this.community.name : '',
              "!")),
        h("h3", null, "First, import your Wallet, or create a brand new account.")),
      h("div", { class: "wallet-modal-button new-user" },
        h("button", { onClick: () => this.handleMetamaskClick(), class: this.isAccount === 'metamask' ? 'activeSelection large' : this.isAccount === null ? 'large' : 'inactiveSelection large' },
          h("div", { class: "sw-icon", innerHTML: MetamasIcon }),
          h("h4", null, "Inject from Metamask")),
        h("button", { class: this.isAccount === 'portis' ? 'activeSelection large' : this.isAccount === null ? 'large' : 'inactiveSelection large', onClick: () => this.handlePortisClick() },
          h("div", { class: "sw-icon", innerHTML: PortisIcon }),
          h("h4", null, "Create Social Account"))),
      h("div", { class: "step-btn-wrapper" },
        h("button", { disabled: this.isAccount === null, class: `${this.buttonClass} step-button`, onClick: () => this.handleUserDetailsClick() },
          h("span", { class: "btn-label" }, "Next: Introduce yourself")))));
  }
  static get is() { return "new-user"; }
  static get properties() { return {
    "web3Provider": {
      "type": "any",
      "mutable": true,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "web-3-provider",
      "reflect": false
    },
    "community": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "community",
      "reflect": false
    },
    "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 {
    "isAccount": {},
    "buttonClass": {}
  }; }
  static get events() { return [{
      "method": "showUserDetails",
      "name": "showUserDetails",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "onSkillwalletError",
      "name": "onSkillwalletError",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "null",
        "resolved": "null",
        "references": {}
      }
    }]; }
}
