import { Component, Fragment, h, Host, Listen, Prop, State } from '@stencil/core';
import { KimlikApiImpl } from '../../api/kimlik-api';
const tabs = [
  { label: 'Users', value: 'users' },
  { label: 'API Keys', value: 'api-keys' },
  { label: 'SAML Configs', value: 'saml-configs' },
];
const newItemLabels = {
  // 'users': 'User',
  'api-keys': 'API Key',
  'saml-configs': 'SAML Config',
};
export class KimlikHome {
  constructor() {
    this.selectedTab = 'saml-configs';
    this.showDeleteConfirmation = false;
    this.showItemForm = false;
    this.listKey = 1;
    this.onClickAddNewItem = () => this.showItemForm = true;
    this.onConfirmDeleteItem = () => {
      let promise;
      if (this.selectedTab === 'api-keys') {
        promise = this.apiKimlik.deleteApiKey(this.selectedItem._id);
      }
      else if (this.selectedTab === 'saml-configs') {
        promise = this.apiKimlik.deleteSAMLConfig(this.selectedItem._id);
      }
      this.isDeletePending = true;
      promise === null || promise === void 0 ? void 0 : promise.then(this.invalidate).catch(this.onDeleteFail).finally(() => this.isDeletePending = false);
    };
    this.onDeleteFail = (_error) => {
      // if (error.data?.error === 'target-group-used-in-load-balancers') {
      //   this.deleteErrorMessage = `Target group is being used by load balancers ${error.data.loadBalancers?.map(lb => lb.name).join(', ')}.`;
      // } else if (error.data?.error === 'load-balancer-used-in-domains') {
      //   this.deleteErrorMessage = `Load balancer is being used by domains ${error.data.domains?.map(d => d.domain).join(', ')}.`;
      // }
      this.deleteErrorMessage = 'Unexpected error.';
    };
    this.dismissItemFormDialog = () => {
      this.showItemForm = false;
      this.selectedItem = undefined;
    };
    this.dismissDeleteConfirmationDialog = () => {
      this.showDeleteConfirmation = false;
      this.selectedItem = undefined;
      this.deleteErrorMessage = undefined;
    };
    this.invalidate = () => {
      this.listKey += 1;
      this.showItemForm = false;
      this.showDeleteConfirmation = false;
      this.selectedItem = undefined;
      this.deleteErrorMessage = undefined;
    };
  }
  componentWillLoad() {
    this.apiKimlik = new KimlikApiImpl(this.apiEndpoint, this.apiHeaders);
  }
  onAction(event) {
    event.stopImmediatePropagation();
    const action = event.detail;
    switch (action.name) {
      case 'delete': {
        this.showDeleteConfirmation = true;
        this.selectedItem = action.params.item;
        break;
      }
      case 'edit': {
        this.showItemForm = true;
        this.selectedItem = action.params.item;
        break;
      }
    }
  }
  render() {
    const { apiKimlik, selectedTab } = this;
    return (h(Host, { class: "d-flex flex-column", style: { minHeight: 'calc(100vh - 50px)' } },
      h("div", { class: "container" },
        h("div", { class: "row" },
          h("div", { class: "col-sm-12" },
            h("div", { class: "d-flex align-items-center" },
              h("div", { class: "flex-grow-1" },
                h("dvn-menu", { orientation: "horizontal" }, tabs.map(({ label, value }) => (h("dvn-menu-item", { highlighted: value === selectedTab, onClick: () => this.selectedTab = value }, label))))),
              newItemLabels[selectedTab] &&
                h("dvn-button", { onClick: this.onClickAddNewItem },
                  "New ",
                  newItemLabels[selectedTab]))))),
      selectedTab === 'users' &&
        h(Fragment, null,
          h("kimlik-user-list", { key: this.listKey, apiKimlik: apiKimlik })),
      selectedTab === 'api-keys' &&
        h(Fragment, null,
          h("kimlik-api-key-list", { key: this.listKey, apiKimlik: apiKimlik }),
          this.showItemForm &&
            h("dvn-dialog", { shown: true, onDismiss: this.dismissItemFormDialog },
              h("kimlik-api-key-form", { apiKimlik: apiKimlik, onChange: this.invalidate, item: this.selectedItem }))),
      selectedTab === 'saml-configs' &&
        h(Fragment, null,
          h("kimlik-saml-config-list", { key: this.listKey, apiKimlik: apiKimlik }),
          this.showItemForm &&
            h("dvn-dialog", { shown: true, onDismiss: this.dismissItemFormDialog },
              h("kimlik-saml-config-form", { apiKimlik: apiKimlik, onChange: this.invalidate, item: this.selectedItem }))),
      this.showDeleteConfirmation &&
        h("dvn-dialog", { shown: true, onDismiss: this.dismissDeleteConfirmationDialog, title: "Deletion" },
          h("p", null, "Are you sure to delete this item? This action cannot be undone."),
          this.deleteErrorMessage &&
            h("p", { class: "text-danger" }, this.deleteErrorMessage),
          h("div", { slot: "actions" },
            h("dvn-button", { view: "flat", onClick: this.dismissDeleteConfirmationDialog }, "Cancel"),
            h("dvn-button", { tint: "danger", disabled: this.isDeletePending, progressing: this.isDeletePending, onClick: this.onConfirmDeleteItem }, "Yes, Delete")))));
  }
  static get is() { return "kimlik-home"; }
  static get properties() { return {
    "apiEndpoint": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "api-endpoint",
      "reflect": false
    },
    "apiHeaders": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "api-headers",
      "reflect": false
    }
  }; }
  static get states() { return {
    "selectedTab": {},
    "showDeleteConfirmation": {},
    "showItemForm": {},
    "selectedItem": {},
    "listKey": {},
    "deleteErrorMessage": {},
    "isDeletePending": {}
  }; }
  static get listeners() { return [{
      "name": "action",
      "method": "onAction",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
