import { SozlukApi } from '@dvn/sozluk/api';
import { Component, Event, h, Host, Prop, State } from '@stencil/core';
import { mentornityPairsMeetingWidgetI18nDefault, MentornityPairsMeetingWidgetI18nKey } from './i18n';
export class MentornityPairsMeetingWidget {
  constructor() {
    this.isPending = true;
  }
  async componentWillLoad() {
    this.strings = await this.apiSozluk.getContent(MentornityPairsMeetingWidgetI18nKey, mentornityPairsMeetingWidgetI18nDefault);
  }
  render() {
    const { activePairs, isPending, meetingGoalConfig, menteeType, organisationConfig, requestedPairs, strings, userType, } = this;
    if (isPending) {
      return (h(Host, null,
        h("b", { class: "pl-3", style: { fontSize: '1.1rem' } }, strings.myPairs),
        h("dvn-card", { elevation: 1 },
          h("div", { class: "d-flex justify-content-center" },
            h("dvn-progress", { indefinite: true, tint: "primary" })))));
    }
    // get pairs type
    let pairsType;
    if (userType === 'mentee') {
      pairsType = 'mentor';
    }
    else {
      pairsType = menteeType === 'group' ? 'group' : 'mentee';
    }
    const isMentorSelectionOn = organisationConfig.subscriptionConfig.mentorVisibilityStatus === 'showAvailableMentors';
    const hasPendingRequest = (requestedPairs === null || requestedPairs === void 0 ? void 0 : requestedPairs.length) > 0;
    const hasActivePairs = (activePairs === null || activePairs === void 0 ? void 0 : activePairs.length) > 0;
    const showCardFooter = hasActivePairs || isMentorSelectionOn;
    const showPendingPairRequestAlert = isMentorSelectionOn && hasPendingRequest;
    const showPairList = hasActivePairs;
    const messages = [];
    if (!hasActivePairs) {
      messages.push(strings.notMatchedMessage);
      if (userType === 'mentee') {
        if (isMentorSelectionOn) {
          messages.push(strings.pairsEmptyRequestOpenMessage);
        }
        else {
          messages.push(strings.pairsEmptyRequestOffMessage);
        }
      }
      else {
        if (isMentorSelectionOn) {
          if (hasPendingRequest) {
            messages.push(strings.pairsHasRequestEmptyMessage);
          }
          else {
            messages.push(strings.pairsHasNotRequestEmptyMessage);
          }
        }
        else {
          messages.push(strings.pairsEmptyRequestOffMessage);
        }
      }
    }
    const showMessages = messages.length > 0;
    const goToPairsActionName = userType === 'mentor' ? 'go-to-mentees-page' : 'go-to-mentors-page';
    const goToPairsPage = () => this.action.emit({ name: goToPairsActionName });
    const goToPairSelectionPage = () => this.action.emit({ name: 'go-to-mentor-selection' });
    const goToUserPairPage = (user) => {
      var _a;
      return this.action.emit({
        name: 'go-to-pair-detail-page',
        params: { uid: user._id, subId: (_a = user.subscription) === null || _a === void 0 ? void 0 : _a._id }
      });
    };
    return (h(Host, null,
      h("b", { class: "pl-3", style: { fontSize: '1.1rem' } }, strings.myPairs),
      h("dvn-card", { elevation: 1 },
        showPendingPairRequestAlert &&
          h("dvn-alert", { message: SozlukApi.build(strings.waitingForResponse, { count: requestedPairs.length }) }),
        showPairList &&
          h("div", { class: "row" }, activePairs.map(generatePairView(strings, pairsType, meetingGoalConfig, goToUserPairPage))),
        showMessages &&
          h("div", { class: "col-md-12 text-centered" }, messages.length > 0 && messages.join(' ')),
        showCardFooter &&
          h("dvn-card-footer", { slot: "footer", alignRight: true },
            hasActivePairs &&
              h("dvn-button", { leaned: true, view: "flat", onClick: () => goToPairsPage() }, strings.seeAll),
            isMentorSelectionOn &&
              h("dvn-button", { leaned: true, view: "flat", onClick: () => {
                  if (userType === 'mentee') {
                    goToPairSelectionPage();
                  }
                  else {
                    goToPairsPage();
                  }
                } }, strings.seeRequests)))));
  }
  static get is() { return "mentornity-pair-meeting-summary-widget"; }
  static get originalStyleUrls() { return {
    "$": ["mentornity-pair-meeting-summary-widget.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["mentornity-pair-meeting-summary-widget.css"]
  }; }
  static get properties() { return {
    "apiSozluk": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "SozlukApi",
        "resolved": "SozlukApi",
        "references": {
          "SozlukApi": {
            "location": "import",
            "path": "@dvn/sozluk/api"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "activePairs": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "active-pairs",
      "reflect": false
    },
    "isPending": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "is-pending",
      "reflect": false,
      "defaultValue": "true"
    },
    "meetingGoalConfig": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "meeting-goal-config",
      "reflect": false
    },
    "menteeType": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "mentee-type",
      "reflect": false
    },
    "organisationConfig": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "organisation-config",
      "reflect": false
    },
    "params": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "params",
      "reflect": false
    },
    "requestedPairs": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "requested-pairs",
      "reflect": false
    },
    "userType": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "user-type",
      "reflect": false
    }
  }; }
  static get states() { return {
    "strings": {}
  }; }
  static get events() { return [{
      "method": "action",
      "name": "action",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
}
const generatePairView = (strings, pairsType, meetingGoalConfig, goToUserPairPage) => (pair, i) => {
  if (i >= 6) {
    return;
  }
  const { user, meetings } = pair;
  const shortName = pairsType === 'group'
    ? user.title[0]
    : user.firstName[0] + user.lastName[0];
  const hasMeetings = meetings.length > 0;
  return (h("div", { class: "col-lg-6 col-md-12 user-card" },
    h("div", { class: "header" },
      h("dvn-image", { slot: "media", src: user.imageUrl, text: shortName, leaned: true, shape: "circle", size: 50 }),
      h("b", { class: "clickable pl-2", onClick: () => goToUserPairPage(user) }, pairsType === 'group' ? user.title : user.firstName + ' ' + user.lastName),
      h("dvn-linear-progress", { showPercent: hasMeetings, percent: calculateMeetingsPercent(meetings, hasMeetings, meetingGoalConfig), scale: "small" }),
      h("p", { class: "clickable", onClick: () => goToUserPairPage(user) }, hasMeetings ? `${meetings.length} ${strings.meetings}` : strings.scheduleMeeting))));
};
const calculateMeetingsPercent = (meetings, hasMeetings, meetingGoalConfig) => {
  if (!hasMeetings) {
    return '0';
  }
  const totalMeetings = meetingGoalConfig.meetingGoals.length;
  let completedMeetings = 0;
  const todayDate = new Date();
  meetings.forEach(meeting => {
    const endDate = new Date(meeting.endDate * 1000);
    if (endDate < todayDate) {
      completedMeetings++;
    }
  });
  const result = Math.floor((completedMeetings / totalMeetings) * 100).toString();
  return result;
};
