import { ResponsiveSize, ResponsiveUIHelper } from '@dvn/alaca/utils/ui';
import { AttachmentField } from '@dvn/core/doldurma/src/fields/attachment';
import { DateField } from '@dvn/core/doldurma/src/fields/date';
import { ReferenceField } from '@dvn/core/doldurma/src/fields/reference';
import { TextField } from '@dvn/core/doldurma/src/fields/text';
import { ViewPlacement } from '@dvn/core/models/app-config';
import { takvimMeetingListI18nDefault } from '@dvn/takvim/components/takvim-meeting-list/i18n';
import { Component, Element, Event, h, Host, Method, Prop, State } from '@stencil/core';
const collectionFields = [
  new DateField('startDate', 'Date').setDateFormat('DD MMM YYYY'),
  new ReferenceField('guests', 'Guests', 'name', 'imageUrl', 'users', [
    new AttachmentField('imageUrl'),
    new TextField('name', ''),
  ], false)
];
const listViewConfig = (userSettings, showMobileUI) => {
  const { timeFormat } = userSettings;
  const hourFormat = timeFormat === '12-hour' ? 'hh:mm A' : 'HH:mm';
  const fields = [
    {
      fieldId: 'startDate',
      fieldDisplay: new DateField('startDate', 'Date').setDateFormat(showMobileUI ? 'DD MMM' : 'DD MMMM YYYY, ddd'),
      timeZone: userSettings.timeZone,
    },
    {
      fieldId: 'startHour',
      fieldDisplay: new DateField('startDate', 'Start').setDateFormat(hourFormat),
      timeZone: userSettings.timeZone,
    },
    {
      fieldId: 'endHour',
      fieldDisplay: new DateField('endDate', 'End').setDateFormat(hourFormat),
      timeZone: userSettings.timeZone,
    },
  ];
  if (!showMobileUI) {
    fields.push({ fieldId: 'guests', imageShape: 'circle' });
  }
  return {
    hideHeader: true,
    actionsWidth: showMobileUI ? 48 : 64,
    actions: [
      {
        ui: {
          name: 'open-meeting-detail-from-meeting-list',
          label: 'Open',
          buttonType: 'icon-button',
          iconName: 'uil uil-arrow-right',
          view: 'flat',
        },
        data: {
          type: 'navigation',
          direction: 'forward',
          placement: ViewPlacement.Page,
          viewId: 'meeting-page',
          params: {
            conversionConfig: {
              'item._id': 'meetingId',
            },
          }
        }
      },
    ],
    fields,
    columns: {
      'startHour': showMobileUI ? { weight: 1 } : { width: 100 },
      'guests': {
        width: 100
      }
    }
  };
};
export class TakvimMeetingList {
  constructor() {
    this.isProgressing = true;
    this.strings = takvimMeetingListI18nDefault;
    this.onSizeChange = (size) => {
      this.size = size;
    };
  }
  componentWillLoad() {
    this.uiHelper = new ResponsiveUIHelper(this.el, this.onSizeChange);
    this.size = ResponsiveUIHelper.getSize(this.el.parentElement.clientWidth);
  }
  componentDidLoad() {
    this.fetchMeetings();
  }
  async invalidate(_event) {
    this.meetings = undefined;
    this.error = undefined;
    this.fetchMeetings();
  }
  ;
  async fetchMeetings() {
    const { calendarConfigId, guestIDs } = this;
    const meetings = await this.apiTakvim.getMeetingsOfUser(calendarConfigId, guestIDs).catch(e => {
      this.error = e;
    }).finally(() => this.isProgressing = false);
    if (!meetings)
      return;
    this.meetings = meetings.results;
  }
  render() {
    const { meetings, size, strings, userSettings } = this;
    if (!meetings) {
      return (h(Host, { class: "mb-3" },
        h("div", { class: "progress-container" },
          h("dvn-progress", { indefinite: true, tint: "primary" }))));
    }
    const showMobileUI = size < ResponsiveSize.Small;
    return (h(Host, { class: "mb-3" },
      meetings.length === 0 &&
        h("dvn-card", { elevation: 0, leaned: true },
          h("div", { class: "empty-message-container text-centered" }, strings.noItemInList)),
      h("dvn-list-view-table", { config: listViewConfig(userSettings, showMobileUI), fields: collectionFields, items: meetings, isEndReached: true, isProgressing: this.isProgressing, error: this.error ? strings.fetchingListFailed : undefined, onRetry: () => this.fetchMeetings(), params: {} })));
  }
  static get is() { return "takvim-meeting-list"; }
  static get originalStyleUrls() { return {
    "$": ["./takvim-meeting-list.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["takvim-meeting-list.css"]
  }; }
  static get properties() { return {
    "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": ""
      }
    },
    "userSettings": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "UserSettings",
        "resolved": "UserSettings",
        "references": {
          "UserSettings": {
            "location": "import",
            "path": "@dvn/kimlik/api/models/UserSettings"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "strings": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "TakvimMeetingListI18n",
        "resolved": "TakvimMeetingListI18n",
        "references": {
          "TakvimMeetingListI18n": {
            "location": "import",
            "path": "@dvn/takvim/components/takvim-meeting-list/i18n"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "takvimMeetingListI18nDefault"
    },
    "calendarConfigId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "calendar-config-id",
      "reflect": false
    },
    "guestIDs": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "string[]",
        "resolved": "string[]",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "isProgressing": {},
    "error": {},
    "size": {},
    "meetings": {}
  }; }
  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": []
      }
    }
  }; }
  static get elementRef() { return "el"; }
}
