import { Component, Event, Prop, h, State, Listen } from '@stencil/core';
import { getCommunity } from '../../utils/utils';
import * as buffer from 'buffer';
export class SkillwalletAuth {
  constructor() {
    this.usersIsVisible = false;
    this.loginMenuIsVisible = false;
    this.qrIsVisible = false;
    this.newUserIsVisible = false;
    this.userDetailsAreVisible = false;
    this.userRoleIsVisible = false;
    this.qrText = null;
    this.storedUsername = null;
    this.skillwallet = null;
    this.icon = null;
    this.isPartner = false;
    this.partnersAddress = null;
    this.communityAddress = null;
    this.web3Provider = null;
    this.handleQRClick = () => {
      this.usersIsVisible = false;
      this.qrText = 'skillwallet';
      this.qrIsVisible = true;
    };
  }
  componentWillLoad() {
    this.getSkillWallet();
  }
  getSkillWallet() {
    this.skillwallet = JSON.parse(localStorage.getItem('skillWallet'));
    if (this.skillwallet) {
      this.icon = this.skillwallet['imageUrl'];
      this.storedUsername = this.skillwallet['nickname'];
      this.onSkillwalletLogin.emit(true);
    }
  }
  async componentDidLoad() {
    window.Buffer = buffer;
    const comm = await getCommunity(this.partnerKey);
    this.community = comm;
  }
  handleHideClick() {
    if (!this.isPartner) {
      this.displayLogin = false;
      this.usersIsVisible = false;
      this.loginMenuIsVisible = false;
      this.qrIsVisible = false;
      this.newUserIsVisible = false;
      this.userDetailsAreVisible = false;
      this.userRoleIsVisible = false;
    }
  }
  handleClickPropagation(e) {
    e.stopPropagation();
  }
  handleUserDetails(details) {
    this.icon = details.detail['image'];
    this.storedUsername = details.detail['username'];
  }
  showLoginMenu() {
    this.usersIsVisible = false;
    this.loginMenuIsVisible = true;
  }
  showUserDetails(provider) {
    this.newUserIsVisible = false;
    this.userDetailsAreVisible = true;
    this.web3Provider = provider.detail;
  }
  showUserRole() {
    this.userDetailsAreVisible = false;
    this.userRoleIsVisible = true;
  }
  closeModalOnLogin() {
    this.displayLogin = false;
    this.onSkillwalletLogin.emit(true);
    this.getSkillWallet();
  }
  handleClick() {
    this.displayLogin = true;
    this.usersIsVisible = true;
  }
  handleNewScreen(text) {
    this.usersIsVisible = false;
    this.userRoleIsVisible = false;
    if (text.detail) {
      this.qrText = text.detail;
      this.qrIsVisible = true;
    }
    else if (this.isPartner === false) {
      this.newUserIsVisible = true;
    }
    else {
      this.userDetailsAreVisible = true;
    }
  }
  handlePartnerFlow(event) {
    console.log(event.detail);
    this.communityAddress = event.detail.communityAddr;
    this.partnersAddress = event.detail.partnersAddr;
    this.isPartner = true;
    this.displayLogin = true;
    this.usersIsVisible = true;
  }
  render() {
    return (h("div", null,
      this.storedUsername ?
        h("button", { class: "connect-wallet-button logged-in", disabled: true },
          h("auth-image", { class: "uploaded-img", image: this.icon }),
          h("p", null, this.storedUsername)) :
        h("button", { class: "connect-wallet-button", onClick: () => this.handleClick() },
          h("auth-image", { class: "person-img", image: "https://skillwallet-demo-images.s3.us-east-2.amazonaws.com/user.svg" }),
          h("p", null, "Connect Wallet")),
      this.displayLogin ?
        h("div", { class: "background-screen", onClick: () => this.handleHideClick() },
          h("div", { class: "topDiv" },
            h("div", { class: "modalWindow", onClick: (event) => this.handleClickPropagation(event) },
              (this.usersIsVisible === true) ? h("users-modal", { isPartner: this.isPartner }) : null,
              (this.loginMenuIsVisible === true) ? h("login-menu", { isPartner: this.isPartner, web3Provider: this.web3Provider }) : null,
              this.qrIsVisible === true ? h("qr-modal", { community: this.community, textKey: this.qrText }) : null,
              this.newUserIsVisible === true ? h("new-user", { isPartner: this.isPartner, community: this.community, web3Provider: this.web3Provider }) : null,
              this.userDetailsAreVisible === true ?
                h("user-details", { isPartner: this.isPartner, community: this.community, validator: { user: { name: 'length', options: { min: 4, max: 17 } }, file: { name: 'file', options: [] } } }) : null,
              this.userRoleIsVisible === true ? h("user-role", { isPartner: this.isPartner, community: this.community, partnersAddress: this.partnersAddress, communityAddress: this.communityAddress, web3Provider: this.web3Provider, validator: { user: { name: 'commitment', options: { min: 1 } } } }) : null))) : null));
  }
  static get is() { return "skillwallet-auth"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["skillwallet-auth.css"]
  }; }
  static get styleUrls() { return {
    "$": ["skillwallet-auth.css"]
  }; }
  static get properties() { return {
    "partnerKey": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "partner-key",
      "reflect": false
    },
    "allowCreateNewUser": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "allow-create-new-user",
      "reflect": false
    }
  }; }
  static get states() { return {
    "community": {},
    "displayLogin": {},
    "usersIsVisible": {},
    "loginMenuIsVisible": {},
    "qrIsVisible": {},
    "newUserIsVisible": {},
    "userDetailsAreVisible": {},
    "userRoleIsVisible": {},
    "qrText": {},
    "storedUsername": {},
    "skillwallet": {},
    "icon": {},
    "isPartner": {},
    "partnersAddress": {},
    "communityAddress": {},
    "web3Provider": {}
  }; }
  static get events() { return [{
      "method": "showLogin",
      "name": "showLogin",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "Boolean",
        "resolved": "Boolean",
        "references": {
          "Boolean": {
            "location": "global"
          }
        }
      }
    }, {
      "method": "onSkillwalletLogin",
      "name": "onSkillwalletLogin",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "Boolean",
        "resolved": "Boolean",
        "references": {
          "Boolean": {
            "location": "global"
          }
        }
      }
    }]; }
  static get listeners() { return [{
      "name": "userDetailsSaved",
      "method": "handleUserDetails",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "showLoginMenu",
      "method": "showLoginMenu",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "showUserDetails",
      "method": "showUserDetails",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "showUserRole",
      "method": "showUserRole",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "closeModalOnLogin",
      "method": "closeModalOnLogin",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "showNewScreen",
      "method": "handleNewScreen",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "activateSkillwalletCommunity",
      "method": "handlePartnerFlow",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
