import { Component, h, Host, State } from '@stencil/core';
import * as O from 'fp-ts/Option';
import { Subscription } from 'rxjs';
import roleManagementService from '../role-management.service';
import roleManagementQuery from '../store/role-management.query';
export class RoleEditorsSection {
  constructor() {
    this.storeSubscription = new Subscription();
    this.isEmailValid = false;
    this.displayInvalidEmailError = false;
    this.emailNotExist = false;
    this.isLoading = false;
    // From https://emailregex.com/
    // eslint-disable-next-line no-control-regex
    this.emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
    this.editorItem = (editorProfile) => {
      const { basicProfile, benefitsProfile } = editorProfile;
      const getRoleDescription = (role) => {
        switch (role) {
          case 'accountAdmin':
            return 'Admin';
          case 'accountEditor':
            return 'Editor';
          case 'user':
            return 'User';
          default:
            return 'Unknown';
        }
      };
      return (h("tr", null,
        h("td", null, basicProfile.firstName),
        h("td", null, basicProfile.email),
        h("td", null, getRoleDescription(benefitsProfile.role)),
        h("td", { class: "text-center" },
          h("a", { href: "#", onClick: (e) => {
              e.preventDefault();
              roleManagementService.showRemoveEditorDialog(editorProfile);
            } }, "Remove"))));
    };
  }
  componentWillLoad() {
    this.storeSubscription.add(roleManagementQuery.editorProfiles$.subscribe((editorProfiles) => (this.editorProfiles = editorProfiles)));
    this.storeSubscription.add(roleManagementQuery.editorLoading$.subscribe((editorLoading) => (this.isLoading = editorLoading)));
  }
  disconnectedCallback() {
    this.storeSubscription.unsubscribe();
  }
  render() {
    return (h(Host, null,
      h("h5", null, "Editors"),
      h("hr", null),
      h("form", { class: "needs-validation", novalidate: true, ref: (element) => (this.form = element) },
        h("div", { class: "d-flex align-items-start flex-column" },
          h("h6", null, "Add new editor"),
          h("div", { class: `d-flex align-items-center ${this.displayInvalidEmailError ? 'was-validated' : ''}` },
            h("input", { type: "text", name: "editorEmail", maxLength: 50, required: true, class: `form-control w-auto ${this.emailNotExist ? 'is-invalid' : ''}`, onFocus: (_) => {
                this.emailNotExist = false;
                this.displayInvalidEmailError = false;
              }, pattern: this.emailRegex.source }),
            h("fl-button", { onClick: async (e) => this.addEditorHandler(e), class: "ml-3" },
              h("div", { class: "d-flex" },
                h("ap-ben-icon", { class: "fa mr-2", iconPrefix: "fad", iconId: "user-plus" }),
                h("div", null, "Add"))),
            h("fl-loading-indicator", { class: `ml-3 ${this.isLoading ? '' : 'd-none'}` }),
            h("div", { class: "invalid-feedback ml-3 flex-grow-2" }, this.emailNotExist
              ? 'Email not exists, please check again.'
              : 'Please input a valid Email.')))),
      h("div", { class: "border rounded mt-4 px-0" },
        h("table", { class: "table m-0" },
          h("thead", { class: "thead-light" },
            h("tr", null,
              h("th", { scope: "col" }, "NAME"),
              h("th", { scope: "col" }, "EMAIL"),
              h("th", { scope: "col" }, "ROLE"),
              h("th", { scope: "col" }))),
          h("tbody", null, this.editorProfiles.map(this.editorItem))))));
  }
  async addEditorHandler(e) {
    e.preventDefault();
    this.isEmailValid = this.form.checkValidity();
    this.displayInvalidEmailError = !this.isEmailValid;
    if (!this.isEmailValid) {
      return;
    }
    const emailElement = this.form.elements.namedItem('editorEmail');
    const user = await roleManagementService.addEditorByEmail(emailElement.value);
    if (O.isNone(user)) {
      this.emailNotExist = true;
    }
    else {
      emailElement.value = '';
    }
  }
  static get is() { return "ap-ben-role-editors-section"; }
  static get states() { return {
    "editorProfiles": {},
    "isEmailValid": {},
    "displayInvalidEmailError": {},
    "emailNotExist": {},
    "isLoading": {}
  }; }
}
