import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6f10a81.js';
import './index-ec7dc2ad.js';
import { g as getDataModelField } from './data-model-bb5789f5.js';
import './BaseField-d94c5b14.js';
import './FieldModelGenerator-6ec60042.js';
import './date-b270be76.js';
import './index-94c1d7bf.js';
import './table-config-c0c15e50.js';
import { c as capitalize } from './string-2d991277.js';
import { a as getUserInitials, g as getUserFullName } from './User-e14f1ece.js';
import { g as getPairConfigMemberCollection } from './pair-config-6cadad1f.js';
import { R as ResponsiveUIHelper, a as ResponsiveSize } from './ui-f4196fad.js';
import { I as ItemFetchState } from './item-fetch-state-3ee8988a.js';

function buildSummaryCardViewConfig(view) {
  var _a;
  return Object.assign(Object.assign({}, (_a = view.ui.main) === null || _a === void 0 ? void 0 : _a.infoSummaryCardViewConfig), { footer: {
      actions: [
        {
          ui: {
            label: view.ui.i18n.seeMore || 'See More',
            name: 'open-member-detail-view',
            view: 'flat'
          }
        }
      ]
    } });
}
const DvnAppViewAtamaMemberPairDetailView = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.action = createEvent(this, "action", 7);
    this.item = ItemFetchState.init();
    this.showInfoDetailDialog = false;
    this.showEndPairConfirmationDialog = false;
    this.onSizeChange = (size) => {
      this.size = size;
    };
  }
  onAction(event) {
    const action = event.detail;
    if (action.name === 'open-member-detail-view') {
      event.preventDefault();
      this.showInfoDetailDialog = true;
    }
    if (action.name === 'create-meeting-with-config-only') {
      event.preventDefault();
      if (!this.params.showCreateMeetingButton) {
        // open availabilities page if the current user cannot create meeting
        // TODO also check if mentor can create availabilities, otherwise forwarding user there won't make sense
        this.action.emit({
          name: 'view-availabilities',
          data: {
            item: this.item.data,
          }
        });
        return;
      }
      // the children who fires this event doesn't have the item detail
      // catch the event, add the item details and fire the same event
      this.action.emit({
        name: 'create-meeting',
        data: {
          meetingConfig: event.detail.data.meetingConfig,
          item: this.item.data,
        }
      });
    }
  }
  fetchMembershipConfigOfMemberToShow() {
    const { notifier, view: { ui: { i18n }, table } } = this;
    const { memberToViewRefFieldId } = this.params;
    const pairConfig = table;
    this.apiUye.getMembershipConfigWithName(getPairConfigMemberCollection(pairConfig, memberToViewRefFieldId)).then(response => {
      this.membershipConfigToShow = response;
      this.fetchItem();
    }, error => notifier.alert(i18n.fetchConfigurationError || 'Getting configuration failed.', error.status));
  }
  fetchItem(ignoreError = false) {
    const { membershipConfigToShow, item, view: { ui: { i18n } } } = this;
    if (item.isPending || (item.error && !ignoreError)) {
      return;
    }
    const { notifier, view: { table } } = this;
    const pairConfig = table;
    const { memberToViewRefFieldId, memberToViewRefFieldValue } = this.params;
    this.item = item.beforeFetch();
    this.apiData.get(getPairConfigMemberCollection(pairConfig, memberToViewRefFieldId), memberToViewRefFieldValue, {
      fields: membershipConfigToShow.fields,
    }).then(response => this.item = item.afterFetch(response), error => {
      this.item = item.afterFetchError(error);
      notifier.alert(i18n.fetchItemError || 'Getting item failed.', error.status);
    });
  }
  completePair() {
    this.apiAtama.endPair('', '', this.params.pairId).then(() => {
      this.action.emit({
        type: 'navigation',
        direction: 'forward',
        resetHistory: true,
        viewId: this.params.viewIdToNavigateOnEndPair,
      });
    });
  }
  componentDidLoad() {
    this.fetchMembershipConfigOfMemberToShow();
    this.uiHelper = new ResponsiveUIHelper(this.el, this.onSizeChange);
  }
  render() {
    var _a, _b;
    const { membershipConfigToShow, item, size, view: { ui: { i18n } } } = this;
    const showMobileUI = size < ResponsiveSize.Medium;
    if (!item.data || !membershipConfigToShow) {
      return (h(Host, { class: "d-flex justify-content-center pt-3 mt-3" }, h("dvn-progress", { indefinite: true })));
    }
    const { view } = this;
    const pairConfig = view.table;
    const membership = item.data;
    // TODO add this to config because we need this feature for groups as well
    const userToView = getDataModelField(membership, 'user');
    const infoSummaryCardViewConfig = (_a = view.ui.main) === null || _a === void 0 ? void 0 : _a.infoSummaryCardViewConfig;
    const canCompletePairProcess = (_b = pairConfig.actionPermissions[this.params.userRefFieldId]) === null || _b === void 0 ? void 0 : _b.completePair;
    return (h(Host, { class: "d-block mt-3 pt-3" }, h("div", { class: "row" }, h("div", { class: {
        'col-sm-12 col-md-9': !showMobileUI,
        'col-sm-12': showMobileUI,
      } }, h("dvn-card", { elevation: 0, leaned: true }, h("div", { class: "d-flex align-items-center" }, h("dvn-image", { src: userToView.imageUrl, shape: "circle", size: 48, text: getUserInitials(userToView) }), h("div", { class: "d-flex flex-column ml-2" }, h("b", { class: "mb-1" }, getUserFullName(userToView)), h("small", null, capitalize(i18n.roleName || membershipConfigToShow.roleName)))), (showMobileUI && (this.params.showSendMessageButton || this.params.showAvailabilitiesButton)) &&
      h("dvn-card-footer", { slot: "footer", alignRight: true }, this.params.showSendMessageButton &&
        h("dvn-icon-button", { iconName: "uil uil-envelope", onClick: () => this.action.emit({
            name: 'send-message',
            data: {
              item: item.data,
            }
          }), view: "outline" }), this.params.showAvailabilitiesButton &&
        h("dvn-icon-button", { iconName: "uil uil-calendar-alt", onClick: () => this.action.emit({
            name: 'view-availabilities',
            data: {
              item: item.data,
            }
          }), view: "outline" }))), infoSummaryCardViewConfig &&
      h("div", { class: "mt-3" }, h("div", { class: "ml-2 mb-2" }, h("small", null, h("b", null, i18n.info || 'INFO'))), h("dvn-card-view", { config: buildSummaryCardViewConfig(view), fields: membershipConfigToShow.fields, item: membership, leaned: true }), h("dvn-dialog", { shown: this.showInfoDetailDialog, onDismiss: () => this.showInfoDetailDialog = false, raw: true }, h("dvn-card-view", { config: this.view.ui.main.infoDetailCardViewConfig, fields: membershipConfigToShow.fields, item: membership }))), pairConfig.structure &&
      h("div", { class: "mt-3" }, h("div", { class: "ml-2 mb-2" }, h("small", null, h("b", null, i18n.meetings || 'MEETINGS'))), h("atama-structured-pair-overview", { i18n: i18n, apiAtama: this.apiAtama, pairConfig: pairConfig, userRefFieldId: this.params.userRefFieldId, showCreateMeetingButton: this.params.showAvailabilitiesButton || this.params.showCreateMeetingButton, size: size }))), !showMobileUI &&
      h("div", { class: "col-sm-12 col-md-3" }, h("div", null, this.params.showAvailabilitiesButton &&
        h("dvn-button", { leaned: true, onClick: () => this.action.emit({
            name: 'send-message',
            data: {
              item: item.data,
            }
          }), tint: "primary", view: "flat" }, i18n.sendMessage || 'Send Message'), this.params.showAvailabilitiesButton &&
        h("dvn-button", { leaned: true, onClick: () => this.action.emit({
            name: 'view-availabilities',
            data: {
              item: item.data,
            }
          }), tint: "primary", view: "flat" }, i18n.createMeeting || 'Schedule Session')), canCompletePairProcess &&
        h("div", null, h("dvn-button", { leaned: true, onClick: () => {
            this.showEndPairConfirmationDialog = true;
          }, tint: "primary", view: "flat" }, i18n.endPair || 'Finish This Process'), h("dvn-dialog", { title: i18n.endPairConfirmationTitle || 'Are you sure to end the process?', shown: this.showEndPairConfirmationDialog, onDismiss: () => this.showEndPairConfirmationDialog = false }, i18n.endPairConfirmationDescription || 'This action removes the pair from your account. You will not be able to schedule meetings with this person.', h("div", { slot: "actions" }, h("dvn-button", { tint: "primary", view: "flat", onClick: () => this.showEndPairConfirmationDialog = false }, i18n.cancel || 'Cancel'), h("dvn-button", { tint: "danger", view: "flat", onClick: () => this.completePair() }, i18n.endPairConfirmationFinishPair || 'Finish the Process'))))))));
  }
  get el() { return getElement(this); }
};

export { DvnAppViewAtamaMemberPairDetailView as dvn_app_view_atama_member_pair_detail_view };
