import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-55faf181.js';
import { R as ResponsiveUIHelper, a as ResponsiveSize } from './ui-c7f31f6f.js';
import { D as DataModel } from './data-model-f5160369.js';
import { L as ListFetchState } from './list-fetch-state-623a5ba4.js';
import { P as PairConfig, c as getPairConfigSelectionConfigTargetingRole, b as getPairConfigSelectionConfigForRole } from './pair-config-e51ec0c7.js';
import './table-config-5c917348.js';
import './FieldModelGenerator-1ee7fda2.js';
import './index-6a1cf9c1.js';
import './BaseField-461b6d0c.js';
import './index-403e215e.js';
import './date-ce777316.js';
import './index-083a6906.js';
import './index-fa1db470.js';

const DvnAppViewAtamaMemberPairsOverviewView = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.action = createEvent(this, "action", 7);
    this.list = ListFetchState.init();
    this.shownTab = 'pairs';
    this.onSizeChange = (size) => {
      this.size = size;
    };
  }
  componentWillLoad() {
    this.fetchMembershipConfigOfMemberToShow();
  }
  componentDidLoad() {
    this.uiHelper = new ResponsiveUIHelper(this.el, this.onSizeChange);
  }
  fetchMembershipConfigOfMemberToShow() {
    var _a;
    const { notifier, view: { table, ui: { i18n } } } = this;
    const { memberToViewRefFieldId } = this.params;
    const memberToShowTableName = (_a = table.fields.find(f => f.type === 'reference' && f.id === memberToViewRefFieldId)) === null || _a === void 0 ? void 0 : _a.otherCollection;
    this.apiUye.getMembershipConfigWithName(memberToShowTableName).then(response => {
      this.membershipConfigToShow = response;
      this.fetchList();
    }, error => notifier.alert(i18n.fetchConfigurationError || 'Getting configuration failed.', error.status));
  }
  fetchList() {
    const { list } = this;
    if (list.isPending) {
      return;
    }
    const { membership, notifier, view: { table, ui: { i18n } } } = this;
    const { userRefFieldId } = this.params;
    this.list = list.beforeFetch();
    this.apiAtama.getPairsOfUser(table.base, table.name, userRefFieldId, membership._id)
      .then(response => this.list = list.afterFetch(response, false), error => {
      this.list = list.afterFetchError(error);
      notifier.alert(i18n.fetchListError || 'Fetching list failed.', error.status);
    });
  }
  onRequestAcceptOrReject() {
    this.fetchList();
  }
  onClickReceivedRequestUser(user) {
    this.action.emit({
      type: 'navigation',
      direction: 'forward',
      resetHistory: true,
      viewId: this.params.viewIdToViewRequestSender,
      params: {
        item: user,
      }
    });
  }
  render() {
    var _a;
    const { list, membershipConfigToShow, shownTab, size, view } = this;
    const { ui: { i18n } } = view;
    const showMobileUI = size < ResponsiveSize.Medium;
    if (!membershipConfigToShow) {
      return (h("div", { class: "d-flex justify-content-center pt-3" }, h("dvn-progress", { indefinite: true })));
    }
    const { memberToViewRefFieldId, userRefFieldId } = this.params;
    // extract the member (to show) data from the pair data
    const itemsToShow = (list.data || [])
      .map(item => {
      const userData = DataModel.decode(item[memberToViewRefFieldId][0]);
      // TODO find another pass the pair id
      userData.pairId = item._id;
      return userData;
    });
    const arePairsFetched = !!list.data;
    const pairConfig = PairConfig.decode(view.table);
    // check if this user needs to see selection UI
    const selectionConfig = getPairConfigSelectionConfigForRole(pairConfig, userRefFieldId);
    // check if this user needs to see approve UI (meaning some other users are selecting this user)
    const selectionConfigTargeted = getPairConfigSelectionConfigTargetingRole(pairConfig, userRefFieldId);
    // show selection active card if the selection is on and the pair limit is more than the active pair count
    const showSelectionActiveCard = arePairsFetched && (selectionConfig === null || selectionConfig === void 0 ? void 0 : selectionConfig.isActive())
      && (selectionConfig.pairLimit === 0 || selectionConfig.pairLimit > itemsToShow.length);
    const showPairList = shownTab === 'pairs' || !showMobileUI;
    const isReceivedRequestListIncluded = !!selectionConfigTargeted;
    const showReceivedRequestList = !!isReceivedRequestListIncluded && (shownTab === 'pair-requests' || !showMobileUI);
    const showHeaders = !showMobileUI;
    return (h(Host, { class: "d-block" }, showMobileUI && isReceivedRequestListIncluded &&
      h("div", { class: "d-flex justify-content-center pt-3" }, h("dvn-content-switcher", { options: [
          {
            label: i18n.pairs || 'Pairs',
            value: 'pairs',
          },
          {
            label: i18n.receivedRequests || 'Received Requests',
            value: 'pair-requests',
          },
        ], onChange: (event) => this.shownTab = event.detail, value: this.shownTab })), showSelectionActiveCard &&
      h("div", { class: "pt-3" }, h("dvn-card", { elevation: 0, leaned: true, tint: i18n.selectionCardTint || 'primary' }, h("dvn-card-header", { slot: "header", tint: i18n.selectionCardTint || 'primary', title: i18n.selectionCardTitle || 'Selection is on!' }), i18n.selectionCardMessage || 'You can view all available users and send them requests.', h("dvn-card-footer", { slot: "footer", alignRight: true }, h("dvn-button", { tint: i18n.selectionCardActionTint || 'secondary', onClick: () => this.action.emit({
          type: 'navigation',
          direction: 'forward',
          resetHistory: true,
          viewId: this.params.viewIdToNavigateToSelectPair,
        }) }, i18n.selectionCardActionLabel || 'Go to selection page')))), h("div", { class: "row" }, showPairList &&
      h("div", { class: {
          'col-md-12 pt-3': true,
          'col-lg-8': showReceivedRequestList,
        } }, showReceivedRequestList &&
        h("div", { class: "ml-2 mb-2 d-flex align-items-center" }, showHeaders &&
          h("small", null, h("b", null, ((_a = i18n.pairs) === null || _a === void 0 ? void 0 : _a.toLocaleUpperCase()) || 'PAIRS'), "\u00A0"), (list.isPending && list.data) &&
          h("dvn-progress", { indefinite: true, size: 14, strokeWidth: 2, tint: "primary" })), (list.isPending && !list.data) &&
        h("div", { class: "d-flex justify-content-center" }, h("dvn-progress", { indefinite: true })), list.data &&
        h("div", null, itemsToShow.length > 0
          ? h("dvn-card-list-view", { config: view.ui, fields: membershipConfigToShow.fields, items: itemsToShow })
          : h("dvn-card", { elevation: 0, leaned: true, tint: "warning" }, i18n.noPairsMessage || 'You don\'t have any pairs.'))), showReceivedRequestList &&
      h("div", { class: {
          ['col-sm-12 col-md-4 pt-3']: !showMobileUI,
          ['col-sm-12 col-md-12 pt-3']: showMobileUI,
        } }, h("atama-received-request-list", { i18n: i18n, apiAtama: this.apiAtama, onActionDone: () => this.onRequestAcceptOrReject(), onViewRequestSender: (user) => this.onClickReceivedRequestUser(user), showHeader: showHeaders, table: this.view.table })))));
  }
  get el() { return getElement(this); }
};

export { DvnAppViewAtamaMemberPairsOverviewView as dvn_app_view_atama_member_pairs_overview_view };
