import { Component, h, Prop, Event } from '@stencil/core';
import { getServiceConfigByType } from '../../shared/services';
import { stringContainsJson } from '../../shared/utils';
import { format } from 'date-fns';
export class GdUserDashboardListItem {
  constructor() {
    /**
     * if history item url is a valid url, clicking on it will immediately navigate to that url
     * if set to false, the application will need to use the labelClick event to handle navigation
     */
    this.followUrl = true;
    /**
     * whether the item should be selectable (have a checkbox)
     */
    this.selectable = true;
    /**
     * whether the item should be selected
     */
    this.selected = false;
    /**
     * if item should show who shared it
     */
    this.showSharedBy = false;
    /**
     * if item should show edit button
     */
    this.allowEdit = false;
    /**
     * if item should show favorite button
     */
    this.allowFavorite = true;
    /**
     * if item should show delete button
     */
    this.allowDelete = true;
  }
  /**
   * renders the user dashboard list item
   */
  render() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
    const serviceConfig = getServiceConfigByType((_a = this.item) === null || _a === void 0 ? void 0 : _a.serviceType);
    // format created date or fallback to all zeroes (fallback should only happen with test data)
    const createdDate = ((_b = this.item) === null || _b === void 0 ? void 0 : _b.created) ? format(new Date(this.item.created), 'MM-dd-yyyy hh:mm:ss') : '00-00-0000 00:00:00';
    return (h("bs-list-group-item", { actionable: true },
      h("div", { class: "container-fluid", style: { paddingLeft: '0', paddingRight: '0' } },
        h("div", { class: "row" },
          this.selectable && (h("div", { class: "px-3" },
            h("bs-form-check", { type: "checkbox", size: 16, checked: this.selected, onBsOnInput: (e) => this.handleItemSelect(e.detail.checked) }))),
          h("div", { class: "col" },
            h("div", { class: "mb-3 d-flex align-items-center" },
              h("span", { class: "date" },
                createdDate,
                this.showSharedBy && (h("span", { class: "sharedby" },
                  "Shared by: ", (_c = this.item) === null || _c === void 0 ? void 0 :
                  _c.sharedBy))),
              h("bs-icon", { class: "mx-4", icon: `fab ${serviceConfig.icon}`, size: 16 }),
              h("a", { class: "label", href: (_d = this.item) === null || _d === void 0 ? void 0 : _d.url, title: serviceConfig.description, onClick: event => this.handleLabelClick(event) }, ((_e = this.item) === null || _e === void 0 ? void 0 : _e.label) || ((_f = this.item) === null || _f === void 0 ? void 0 : _f.url))),
            h("div", { class: "tags" }, ((_g = this.item) === null || _g === void 0 ? void 0 : _g.tags) && (h("gd-tag-input", { value: (_h = this.item) === null || _h === void 0 ? void 0 : _h.tags, variant: "pills", placeholder: "Add tag...", onTagsChange: (e) => this.handleTagsChange(e.detail) })))),
          h("div", { class: "col-2" },
            h("div", { class: "mb-3 d-flex align-items-center justify-content-end" },
              this.allowEdit && (h("bs-button", { class: "edit ml-3", variant: "link", onClick: () => this.editItem.emit(this.item), title: "Edit" },
                h("bs-icon", { icon: "fab fa-edit", size: 16, style: { color: '#000' } }))),
              this.allowFavorite && (h("bs-button", { class: "favorite ml-3", variant: "link", onClick: () => this.handleToggleFavorite(), title: "Favorite" },
                h("bs-icon", { icon: `${((_j = this.item) === null || _j === void 0 ? void 0 : _j.favorite) ? 'fab' : 'fas'} fa-heart`, size: 16, style: { color: ((_k = this.item) === null || _k === void 0 ? void 0 : _k.favorite) ? '#c77777' : '#000' } }))),
              this.allowDelete && (h("bs-button", { class: "delete ml-3", variant: "link", onClick: () => this.handleDelete(), title: "Delete" },
                h("bs-icon", { icon: "fab fa-trash-alt", size: 16, style: { color: '#000' } })))))))));
  }
  /**
   * if needed, will block the link click and use the labelClick event instead. labelClick is used if:
   *  - the url contains JSON
   *  - the followUrl prop is false
   *
   * @param event
   */
  handleLabelClick(event) {
    var _a;
    if (stringContainsJson((_a = this.item) === null || _a === void 0 ? void 0 : _a.url) || !this.followUrl) {
      event.preventDefault(); // stop browser from following the link
      this.labelClick.emit(this.item);
      return; // not really needed, but lets explicitly return
    }
  }
  /**
   * updates visual favorite state and emits toggle event
   */
  handleToggleFavorite() {
    this.updateItem.emit(Object.assign(Object.assign({}, this.item), { favorite: !this.item.favorite }));
  }
  /**
   * emits delete event after user confirmation
   */
  handleDelete() {
    if (!confirm('Are you sure you want to delete this history item?')) {
      return;
    }
    this.deleteItem.emit(this.item);
  }
  // emits update event with updated tags
  handleTagsChange(tags) {
    this.updateItem.emit(Object.assign(Object.assign({}, this.item), { tags }));
  }
  // emits itemSelected event with selected state
  handleItemSelect(checked) {
    this.itemSelected.emit({
      selected: checked,
      historyItem: this.item,
    });
  }
  static get is() { return "gd-user-dashboard-list-item"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["gd-user-dashboard-list-item.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["gd-user-dashboard-list-item.css"]
  }; }
  static get properties() { return {
    "item": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "HistoryItem",
        "resolved": "HistoryItem",
        "references": {
          "HistoryItem": {
            "location": "import",
            "path": "./user-dashboard-list-item"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "the history item to render"
      }
    },
    "followUrl": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "if history item url is a valid url, clicking on it will immediately navigate to that url\nif set to false, the application will need to use the labelClick event to handle navigation"
      },
      "attribute": "follow-url",
      "reflect": false,
      "defaultValue": "true"
    },
    "selectable": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "whether the item should be selectable (have a checkbox)"
      },
      "attribute": "selectable",
      "reflect": false,
      "defaultValue": "true"
    },
    "selected": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "whether the item should be selected"
      },
      "attribute": "selected",
      "reflect": false,
      "defaultValue": "false"
    },
    "showSharedBy": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "if item should show who shared it"
      },
      "attribute": "show-shared-by",
      "reflect": false,
      "defaultValue": "false"
    },
    "allowEdit": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "if item should show edit button"
      },
      "attribute": "allow-edit",
      "reflect": false,
      "defaultValue": "false"
    },
    "allowFavorite": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "if item should show favorite button"
      },
      "attribute": "allow-favorite",
      "reflect": false,
      "defaultValue": "true"
    },
    "allowDelete": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "if item should show delete button"
      },
      "attribute": "allow-delete",
      "reflect": false,
      "defaultValue": "true"
    }
  }; }
  static get events() { return [{
      "method": "labelClick",
      "name": "labelClick",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "the application can use the labelClick handler to customize user dashboard item clicks\nex. if application stores JSON in history item URL field that represents a dialog to display instead of a page"
      },
      "complexType": {
        "original": "HistoryItem",
        "resolved": "HistoryItem",
        "references": {
          "HistoryItem": {
            "location": "import",
            "path": "./user-dashboard-list-item"
          }
        }
      }
    }, {
      "method": "updateItem",
      "name": "updateItem",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "used by the application to save changes that have been made to the history item"
      },
      "complexType": {
        "original": "HistoryItem",
        "resolved": "HistoryItem",
        "references": {
          "HistoryItem": {
            "location": "import",
            "path": "./user-dashboard-list-item"
          }
        }
      }
    }, {
      "method": "deleteItem",
      "name": "deleteItem",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "used by the application to delete the history item"
      },
      "complexType": {
        "original": "HistoryItem",
        "resolved": "HistoryItem",
        "references": {
          "HistoryItem": {
            "location": "import",
            "path": "./user-dashboard-list-item"
          }
        }
      }
    }, {
      "method": "editItem",
      "name": "editItem",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "used by the dashboard to handle editing a history item"
      },
      "complexType": {
        "original": "HistoryItem",
        "resolved": "HistoryItem",
        "references": {
          "HistoryItem": {
            "location": "import",
            "path": "./user-dashboard-list-item"
          }
        }
      }
    }, {
      "method": "itemSelected",
      "name": "itemSelected",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "notifies the dashboard that this item has been selected"
      },
      "complexType": {
        "original": "HistoryItemSelection",
        "resolved": "HistoryItemSelection",
        "references": {
          "HistoryItemSelection": {
            "location": "import",
            "path": "./user-dashboard-list-item"
          }
        }
      }
    }]; }
}
