import { Component, h, Prop, Event } from '@stencil/core';
import { joinCommunity, activatePA } from '../../utils/utils';
import { ethers } from 'ethers';
const partnerRoles = [
  {
    role: 'Founder',
    roleId: 1,
  },
  {
    role: 'Contributor',
    roleId: 2,
  },
  {
    role: 'Investor',
    roleId: 3,
  },
];
export class RolesScreenPartner {
  constructor() {
    this.roleSelected = { role: '', roleId: '' };
    this.communityAddress = null;
    this.partnersAddress = null;
  }
  handleRoleClick(role) {
    this.roleSelected = role;
    this.buttonClass = '';
  }
  async handleUserQRClick() {
    this.isLoadingEvent.emit(true);
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    console.log('joining new member...community: ', this.community);
    const tokenId = await joinCommunity(provider, this.communityAddress, window.sessionStorage.getItem('username'), this.roleSelected, 10);
    const active = await activatePA(this.partnersAddress);
    this.isLoadingEvent.emit(false);
    console.log(tokenId, active);
    window.sessionStorage.setItem('tokenId', tokenId);
    this.showNewScreen.emit('role');
  }
  render() {
    return (h("div", { class: "roles-screen-partner" },
      h("div", { class: "user-role-header" },
        h("p", null, "Pick your Role in your Community - and let it be known for the generations to come!")),
      h("div", { class: "role-fields" }, partnerRoles.map(({ role, roleId }) => {
        return (h("button", { class: `role-button ${this.roleSelected['roleId'] === roleId ? 'activeSelection' : ''}`, onClick: () => this.handleRoleClick({ role, roleId }) },
          h("h4", null, role)));
      })),
      h("div", { class: "step-btn-wrapper" },
        h("button", { onClick: () => this.handleUserQRClick(), class: `${this.buttonClass} step-button`, disabled: this.isLoading }, "That's it - join this community!"))));
  }
  static get is() { return "roles-screen-partner"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["skillwallet-auth.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["skillwallet-auth.css"]
  }; }
  static get properties() { return {
    "roleSelected": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "object",
        "resolved": "object",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "{ role: '', roleId: '' }"
    },
    "isLoading": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "is-loading",
      "reflect": false
    },
    "buttonClass": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "button-class",
      "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": ""
      }
    },
    "communityAddress": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "community-address",
      "reflect": false,
      "defaultValue": "null"
    },
    "skill": {
      "type": "number",
      "mutable": true,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "skill",
      "reflect": false
    },
    "partnersAddress": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "partners-address",
      "reflect": false,
      "defaultValue": "null"
    }
  }; }
  static get events() { return [{
      "method": "showNewScreen",
      "name": "showNewScreen",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "isLoadingEvent",
      "name": "isLoadingEvent",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "Boolean",
        "resolved": "Boolean",
        "references": {
          "Boolean": {
            "location": "global"
          }
        }
      }
    }]; }
}
