import { ResponsiveSize } from "@dvn/alaca/utils/ui";
import CalendarUtils from "@dvn/core/util/calendar";
import { Component, h, Host, Prop, State, Event, Method } from "@stencil/core";
export class AtamaStructuredPairSessionOverview {
  constructor() {
    this.meetingsByIdentifiers = {};
    this.renderHasSessionDesign = (meetingGoal, sessionName) => {
      var _a, _b, _c, _d, _e;
      const meetingDayAndMonth = CalendarUtils.format(new Date(meetingGoal.startDate), 'MMM DD');
      const day = CalendarUtils.format(new Date(meetingGoal.startDate), 'dddd');
      const directionBetweenDatesInMinutes = getMinutesBetweenDates(new Date(meetingGoal.startDate), new Date(meetingGoal.endDate));
      const startDate = CalendarUtils.format(new Date(meetingGoal.startDate), `HH:mm ${CalendarUtils.timeFormat === '12-hour' ? 'A' : ''}`);
      const meetingLocation = ((_a = meetingGoal.location) === null || _a === void 0 ? void 0 : _a.type) === 'microsoftbusiness' ? 'Microsoft Teams' : `${((_c = (_b = meetingGoal.location) === null || _b === void 0 ? void 0 : _b.type) === null || _c === void 0 ? void 0 : _c.charAt(0).toUpperCase()) + ((_e = (_d = meetingGoal.location) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.slice(1))}`;
      return (h("div", { class: "d-flex justify-content-between align-items-center mt-2" },
        h("div", { class: "d-flex meeting-data" },
          h("div", { class: "meeting-date clickable", onClick: () => {
              this.action.emit({
                name: 'open-meeting-detail',
                data: {
                  meeting: meetingGoal
                }
              });
            } },
            h("span", { class: "day-and-month" }, meetingDayAndMonth)),
          h("div", { class: "flex-column ml-3" },
            h("h4", null, sessionName),
            h("div", { class: "meeting-time" },
              h("p", null,
                " ",
                day,
                " - ",
                startDate,
                " - ",
                directionBetweenDatesInMinutes,
                " minutes ")),
            h("div", { class: "d-flex align-items-center text-primary" }, meetingGoal.location.type === 'custom' || meetingGoal.location.type === undefined ?
              h("p", { class: "custom-address" },
                " ",
                truncate(meetingGoal.location.address, 30),
                " ")
              :
                h("div", { class: "d-flex align-items-center" },
                  h("dvn-icon", { "icon-name": "uil uil-video", scale: "large", size: 20, class: "zero-margin-icon" }),
                  h("a", { class: "ml-2", target: '_blank', href: meetingGoal.location.address },
                    " ",
                    meetingLocation,
                    " "))))),
        h("dvn-icon", { onClick: () => {
            this.action.emit({
              name: 'open-meeting-detail',
              data: {
                meeting: meetingGoal
              }
            });
          }, class: "clickable", "icon-name": "uil uil-angle-right-b", size: 35 })));
    };
    this.renderSessionEmptyDesign = (emptyGoal) => {
      const showMobileUI = this.size < ResponsiveSize.Medium;
      return (h("div", { class: "d-flex align-items-center mt-2" },
        h("div", { class: "meeting-date" },
          h("dvn-icon", { iconName: "uil uil-schedule", size: 35 })),
        h("div", { class: `d-flex justify-content-between ${showMobileUI ? 'flex-column' : 'align-items-center'}`, style: { width: showMobileUI ? 'auto' : '100%' } },
          h("div", { class: "font-medium", style: { marginLeft: '16px' } },
            h("h4", null, emptyGoal.name),
            h("p", { style: { color: 'var(--color-neutral)' } }, this.i18n.notScheduled)),
          h("div", { class: "d-flex align-items-center clickable", style: { marginLeft: '14px' }, onClick: () => {
              this.shownMeetingConfig = emptyGoal;
            } },
            h("dvn-icon", { class: "zero-margin-icon mr-1", "icon-name": "uil uil-file-alt", size: showMobileUI ? 20 : 30, scale: "large" }),
            h("p", null, this.i18n.aboutThisSession)))));
    };
  }
  async invalidate(_event) {
    this.fetchMeetings();
  }
  ;
  componentDidLoad() {
    this.fetchMeetings();
  }
  async fetchMeetings() {
    var _a;
    const { pairConfig, userId, sessionUserId } = this;
    const response = await this.apiTakvim.getMeetingsOfUser((_a = pairConfig.calendarConfig) === null || _a === void 0 ? void 0 : _a._id, [sessionUserId, userId]);
    const meetingsByIdentifiers = {};
    response.results.forEach(meeting => {
      meetingsByIdentifiers[meeting.meetingType] = meeting;
    });
    this.meetingsByIdentifiers = meetingsByIdentifiers;
  }
  render() {
    const totalMeetingsGoalLength = this.pairConfig.structure.meetingConfigs.length || 0;
    const hasGoalMeetings = totalMeetingsGoalLength > 0;
    const finishedMeetingsGoalLength = Object.keys(this.meetingsByIdentifiers).length;
    const finishedMeetingsGoalPercent = calculateMeetingsPercent(totalMeetingsGoalLength, finishedMeetingsGoalLength, hasGoalMeetings);
    const meetingGoals = this.pairConfig.structure.meetingConfigs;
    const showMobileUI = this.size < ResponsiveSize.Medium;
    return (h(Host, { class: "mb-3" },
      h("dvn-card", { leaned: true, elevation: 0, class: "mb-3" },
        h("div", { class: `d-flex mb-4 ${showMobileUI ? 'flex-column justify-content-center' : 'justify-content-between align-items-center'}` },
          h("div", { class: `d-flex align-items-center ${!showMobileUI ? 'justify-content-between' : ''}` },
            h("dvn-linear-progress", { percent: finishedMeetingsGoalPercent, showPercent: true, tint: "secondary" }),
            h("p", { class: "ml-2", style: { color: 'var(--color-text-secondary)' } }, this.i18n.completed)),
          h("p", null,
            finishedMeetingsGoalLength,
            " ",
            finishedMeetingsGoalLength > 1 ? this.i18n.meetingsScheduled : this.i18n.meetingScheduled)),
        meetingGoals && meetingGoals.map((goalConfig, i) => {
          var _a;
          const renderCurrentMeetingGoal = this.meetingsByIdentifiers[goalConfig.id];
          const sessionName = (_a = meetingGoals.find(goal => goal.id === goalConfig.id)) === null || _a === void 0 ? void 0 : _a.name;
          const hasMeetingGoal = !!renderCurrentMeetingGoal;
          const displayBreakLine = i < (totalMeetingsGoalLength - 1);
          return (h("div", null,
            hasMeetingGoal ?
              this.renderHasSessionDesign(renderCurrentMeetingGoal, sessionName)
              :
                this.renderSessionEmptyDesign(goalConfig),
            displayBreakLine && h("hr", { class: "break-line" })));
        })),
      h("dvn-dialog", { title: this.shownMeetingConfig ? this.shownMeetingConfig.name : undefined, shown: !!this.shownMeetingConfig, onDismiss: () => this.shownMeetingConfig = undefined }, this.shownMeetingConfig &&
        h("dvn-markdown", { content: this.shownMeetingConfig.specifications[this.userRefFieldId].description }))));
  }
  static get is() { return "atama-structured-pair-session-overview"; }
  static get originalStyleUrls() { return {
    "$": ["atama-structured-pair-session-overview.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["atama-structured-pair-session-overview.css"]
  }; }
  static get properties() { return {
    "i18n": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "AtamaMemberPairDetailViewI18n",
        "resolved": "AtamaMemberPairDetailViewI18n",
        "references": {
          "AtamaMemberPairDetailViewI18n": {
            "location": "import",
            "path": "../../views/atama-member-pair-detail-view-config"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "apiTakvim": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "TakvimApi",
        "resolved": "TakvimApi",
        "references": {
          "TakvimApi": {
            "location": "import",
            "path": "@dvn/takvim/api/takvimApi"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "pairConfig": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "PairConfig",
        "resolved": "PairConfig",
        "references": {
          "PairConfig": {
            "location": "import",
            "path": "@dvn/core/models/pair-config"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "size": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveSize",
        "resolved": "ResponsiveSize.Large | ResponsiveSize.Medium | ResponsiveSize.Small | ResponsiveSize.XLarge | ResponsiveSize.XSmall",
        "references": {
          "ResponsiveSize": {
            "location": "import",
            "path": "@dvn/alaca/utils/ui"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "size",
      "reflect": false
    },
    "userId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "user-id",
      "reflect": false
    },
    "sessionUserId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "session-user-id",
      "reflect": false
    },
    "userRefFieldId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "user-ref-field-id",
      "reflect": false
    }
  }; }
  static get states() { return {
    "meetingsByIdentifiers": {},
    "shownMeetingConfig": {}
  }; }
  static get events() { return [{
      "method": "action",
      "name": "action",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get methods() { return {
    "invalidate": {
      "complexType": {
        "signature": "(_event: CustomEvent<InvalidationAction>) => Promise<void>",
        "parameters": [{
            "tags": [],
            "text": ""
          }],
        "references": {
          "Promise": {
            "location": "global"
          },
          "CustomEvent": {
            "location": "global"
          },
          "InvalidationAction": {
            "location": "import",
            "path": "@dvn/core/models/actions"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
}
const truncate = (text, limit) => {
  if (text.length > limit) {
    return text.substring(0, limit) + '...';
  }
  return text;
};
const calculateMeetingsPercent = (meetingsGoalLength, finishedMeetingsGoalLength, hasGoalMeetings) => {
  if (!hasGoalMeetings) {
    return '0';
  }
  const result = Math.floor((finishedMeetingsGoalLength / meetingsGoalLength) * 100).toString();
  return result;
};
const getMinutesBetweenDates = (startDate, endDate) => {
  const diff = endDate.getTime() - startDate.getTime();
  return Math.round(diff / 60000);
};
