import { ResponsiveSize } from '@dvn/alaca/utils/ui';
import { Component, Event, h, Host, Prop, State } from '@stencil/core';
export class AtamaStructuredPairOverview {
  constructor() {
    this.meetingsByIdentifiers = {};
  }
  componentDidLoad() {
    this.fetchMeetings();
  }
  async fetchMeetings() {
    const response = await this.apiAtama.getMeetingsOfUser('', '', '', '');
    const meetingsByIdentifiers = {};
    response.results.forEach(meeting => {
      meetingsByIdentifiers[meeting.meetingGoalIdentifier] = meeting;
    });
    this.meetingsByIdentifiers = meetingsByIdentifiers;
  }
  render() {
    const { shownMeetingConfig, size, userRefFieldId } = this;
    const showMobileUI = size < ResponsiveSize.Medium;
    return (h(Host, { class: "mb-3" },
      showMobileUI
        ? this.renderList()
        : h("dvn-card", { leaned: true, bodyLeaned: true, elevation: 0 }, this.renderList()),
      h("dvn-dialog", { title: shownMeetingConfig ? shownMeetingConfig.name : undefined, shown: !!shownMeetingConfig, onDismiss: () => this.shownMeetingConfig = undefined }, shownMeetingConfig &&
        h("dvn-markdown", { content: shownMeetingConfig.specifications[userRefFieldId].description }))));
  }
  renderList() {
    const { i18n, meetingsByIdentifiers, pairConfig, size } = this;
    const showMobileUI = size < ResponsiveSize.Medium;
    const Tag = showMobileUI
      ? 'atama-structured-pair-overview-meeting-row-intense'
      : 'atama-structured-pair-overview-meeting-row';
    return pairConfig.structure.meetingConfigs.map((meetingConfig, index) => {
      const meeting = meetingsByIdentifiers[meetingConfig.id];
      const nextMeetingGoal = pairConfig.structure.meetingConfigs.length > index + 2
        && pairConfig.structure.meetingConfigs[index + 1];
      const nextCompleted = nextMeetingGoal && !!meetingsByIdentifiers[nextMeetingGoal.id];
      return (h(Tag, { i18n: i18n, meeting: meeting, meetingConfig: meetingConfig, meetingOrder: index + 1, nextCompleted: nextCompleted, onCreateMeeting: (config) => this.action.emit({
          name: 'create-meeting-with-config-only',
          data: {
            meetingConfig: config,
          }
        }), onShowMeetingDetail: (meetingToShow) => {
          this.action.emit({
            name: 'open-meeting-detail',
            data: {
              meeting: meetingToShow,
            }
          });
        }, onShowMeetingConfigDetail: (config) => {
          this.shownMeetingConfig = config;
        }, showCreateMeetingButton: this.showCreateMeetingButton }));
    });
  }
  static get is() { return "atama-structured-pair-overview"; }
  static get originalStyleUrls() { return {
    "$": ["./atama-structured-pair-overview.css"]
  }; }
  static get styleUrls() { return {
    "$": ["atama-structured-pair-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": ""
      }
    },
    "apiAtama": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "AtamaApi",
        "resolved": "AtamaApi",
        "references": {
          "AtamaApi": {
            "location": "import",
            "path": "../../api/atamaApi"
          }
        }
      },
      "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": ""
      }
    },
    "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
    },
    "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
    },
    "showCreateMeetingButton": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show-create-meeting-button",
      "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": {}
      }
    }]; }
}
