import { Component, Host, h, Prop, Event } from '@stencil/core';
export class UxplObjectHeader {
  editToggle(detail) {
    if (detail.eventOnEdit) {
      this.editDetail.emit(detail);
    }
    else {
      detail.editing = !detail.editing;
      this.config = Object.assign({}, this.config);
    }
  }
  updateValue(ev, detail) {
    let val = ev.target && ev.target.value;
    detail.value = val;
    delete detail.editing;
    this.changed.emit(this.config);
    this.config = Object.assign({}, this.config);
  }
  handleOptionSelection(ev) {
    ev.stopPropagation();
    this.selected.emit(ev.detail);
  }
  handleBack() {
    this.back.emit(true);
  }
  handleExternalOptionsClick() {
    if (this.config.externalOptions) {
      this.optionClick.emit(true);
    }
  }
  render() {
    var _a, _b;
    if (this.config) {
      return (h(Host, null,
        h("div", { class: "uxpl-object-header" },
          h("div", null, (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.title) === null || _b === void 0 ? void 0 : _b.editing),
          h("div", { class: "navigation-section", part: "navigation-icon", onClick: () => this.handleBack() }),
          (this.config.title) ?
            h("div", { class: "details-section" },
              h("div", { class: "details-section-1" },
                h("div", { class: "title" }, this.config.title.editing ?
                  h("input", { maxlength: this.config.title.maxLength ? this.config.title.maxLength : 40, size: this.config.title.value.length > 30 ? this.config.title.value.length : 30, class: "title", value: this.config.title.value, onChange: (e) => this.updateValue(e, this.config.title) })
                  :
                    h("div", { class: "title" }, this.config.title.value)),
                this.config.title.isEdit ?
                  h("div", { class: "details-icon", part: "details-icon", onClick: () => this.editToggle(this.config.title) })
                  : h("div", null)),
              h("div", { class: "details-section-2" }, this.config.details && this.config.details.map((detail, index) => h("div", { class: "detail-content" },
                h("div", { class: "detail-text" }, detail.editing ?
                  h("input", { maxlength: detail.maxLength ? detail.maxLength : 40, size: detail.value.length > 30 ? detail.value.length : 30, class: "detail-text", value: detail.value, onChange: (e) => this.updateValue(e, detail) })
                  :
                    h("div", { class: "detail-text" }, detail.value)),
                detail.isEdit ?
                  h("div", { class: "details-icon", part: "details-icon", onClick: () => this.editToggle(detail) })
                  : h("div", null),
                index != this.config.details.length - 1 ?
                  h("div", { class: "detail-divider" }, "|")
                  :
                    h("div", null)))))
            :
              h("div", { class: "custom-content" },
                h("slot", { name: "custom-content" })),
          h("div", { class: "navigation-options" },
            h("slot", { name: "navigation-content" }),
            this.config.options && this.config.options.length > 0 ?
              h("div", null, this.config.externalOptions ?
                h("div", { class: "options-section", onClick: () => this.handleExternalOptionsClick() })
                :
                  h("uxpl-options-menu", { "y-position": "below", "x-position": "before", config: { options: this.config.options }, onSelected: (ev) => this.handleOptionSelection(ev) }))
              :
                h("div", null)))));
    }
    else {
      return (h(Host, null,
        h("div", null)));
    }
  }
  static get is() { return "uxpl-object-header"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-object-header.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-object-header.css"]
  }; }
  static get assetsDirs() { return ["assets"]; }
  static get properties() { return {
    "config": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "ObjectHeaderConfig",
        "resolved": "ObjectHeaderConfig",
        "references": {
          "ObjectHeaderConfig": {
            "location": "import",
            "path": "../../models/objectHeaderConfig"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Header Configuration"
      }
    }
  }; }
  static get events() { return [{
      "method": "changed",
      "name": "changed",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Header Changed Event"
      },
      "complexType": {
        "original": "ObjectHeaderConfig",
        "resolved": "ObjectHeaderConfig",
        "references": {
          "ObjectHeaderConfig": {
            "location": "import",
            "path": "../../models/objectHeaderConfig"
          }
        }
      }
    }, {
      "method": "optionClick",
      "name": "optionClick",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Header Options Click Event"
      },
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      }
    }, {
      "method": "selected",
      "name": "selected",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Header Selected Option"
      },
      "complexType": {
        "original": "MenuOption",
        "resolved": "MenuOption",
        "references": {
          "MenuOption": {
            "location": "import",
            "path": "../../models/optionsMenuConfig"
          }
        }
      }
    }, {
      "method": "back",
      "name": "back",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Header Back Event"
      },
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      }
    }, {
      "method": "editDetail",
      "name": "editDetail",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Header Detail Edit Event"
      },
      "complexType": {
        "original": "ObjectHeaderDetail",
        "resolved": "ObjectHeaderDetail",
        "references": {
          "ObjectHeaderDetail": {
            "location": "import",
            "path": "../../models/objectHeaderConfig"
          }
        }
      }
    }]; }
}
