import { r as registerInstance, c as createEvent, h, H as Host } from './index-67f7ec52.js';
import { i as isNone } from './index-6869168f.js';
import { a as roleManagementService, b as roleManagementQuery } from './role-management.service-a7592363.js';
import { a as Subscription } from './scheduleArray-b9669898.js';
import './index-8f0ba0c8.js';
import './promise-b835604e.js';
import './api-client-a68152b8.js';
import './datorama-akita-d2413fd0.js';
import './delay-d08c267f.js';
import './filter-aeb65cac.js';

const ConfirmDialog = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.accepted = createEvent(this, "accepted", 7);
    this.declined = createEvent(this, "declined", 7);
    this.cancelled = createEvent(this, "cancelled", 7);
    this.dialogStyle = 'success';
    this.allowedDialogStyles = ['success', 'danger', 'warning', 'info'];
  }
  componentWillLoad() {
    this.validateDialogStyle();
  }
  componentDidUpdate() {
    this.validateDialogStyle();
  }
  render() {
    return (h("div", { class: "uiid-delete-benefit-popup" }, h("div", { class: "my-3" }, h("slot", null)), h("div", { class: "text-right" }, h("button", { class: `uiid-confirm-delete-benefit-item btn btn-${this.dialogStyle} mr-3`, onClick: (_) => {
        var _a;
        (_a = this.accepted) === null || _a === void 0 ? void 0 : _a.emit();
      } }, this.acceptText || 'Accept'), h("button", { class: "btn btn-light", onClick: (_) => {
        var _a;
        (_a = this.declined) === null || _a === void 0 ? void 0 : _a.emit();
      } }, this.declineText || 'Decline'))));
  }
  validateDialogStyle() {
    if (!this.allowedDialogStyles.some((style) => style === this.dialogStyle)) {
      this.dialogStyle = 'success';
    }
  }
};

const RoleEditorsSection = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    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 (isNone(user)) {
      this.emailNotExist = true;
    }
    else {
      emailElement.value = '';
    }
  }
};

const RoleOwnerSection = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    const basicProfile = this.owner.basicProfile;
    return (h(Host, null, h("h5", null, "Owner"), h("hr", null), h("div", { class: "d-flex border rounded px-3" }, h("div", { class: "d-flex flex-wrap align-content-center" }, h("ap-ben-icon", { class: "text-black-50 fa-4x", iconPrefix: "fad", iconId: "user-circle" })), h("div", { class: "d-flex align-items-start flex-column m-3" }, h("h5", null, h("b", null, `${basicProfile.firstName} ${basicProfile.lastName}`)), h("div", null, basicProfile.email)))));
  }
};

const uiContainerCss = ".slide-fwd-center{-webkit-animation:slide-fwd-center 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation:slide-fwd-center 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;}@-webkit-keyframes slide-fwd-center{0%{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:0.5}100%{-webkit-transform:translateY(0px);transform:translateY(0px);opacity:1}}@keyframes slide-fwd-center{0%{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:0.5}100%{-webkit-transform:translateY(0px);transform:translateY(0px);opacity:1}}";

const UiContainer = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.isAppInitialised = false;
  }
  componentDidLoad() {
    this.isAppInitialised = true;
  }
  render() {
    return (h(Host, { class: {
        'slide-fwd-center': true,
        'd-none': !this.isAppInitialised,
        'd-block': this.isAppInitialised
      } }, h("slot", null)));
  }
};
UiContainer.style = uiContainerCss;

export { ConfirmDialog as ap_ben_confirm_dialog, RoleEditorsSection as ap_ben_role_editors_section, RoleOwnerSection as ap_ben_role_owner_section, UiContainer as ap_ben_ui_container };
