import { Component, Host, h, Prop, Event, Listen, State, Watch } from '@stencil/core';
export class UxplTreeMenuItem {
  constructor() {
    this.level = 0;
    this.selected = false;
    this.selectionKeyDelimitter = '>';
    this.idAttribute = 'id';
    this.showChildren = false;
  }
  handleSelectionKeyChange(newValue, oldValue) {
    if (newValue !== oldValue) {
      this.configureState(newValue);
    }
  }
  componentWillLoad() {
    if (this.selectionKey) {
      this.configureState(this.selectionKey);
    }
  }
  configureState(key) {
    if (key !== undefined && key !== null) {
      const keys = key.split(this.selectionKeyDelimitter);
      const selectedId = keys.splice(-1)[0];
      if (keys.findIndex(key => { return key === this.config[this.idAttribute]; }) >= 0) {
        // this is a parent to the selected key
        this.showChildren = true;
      }
      if (selectedId === this.config[this.idAttribute]) {
        // this is the selected key
        this.selected = true;
      }
      else {
        this.selected = false;
      }
    }
  }
  uxplSelectionHandler(event) {
    this.selectionKey = undefined;
    if (event.detail !== (this.treeId + '-' + this.config[this.idAttribute])) {
      this.selected = false;
    }
    else {
      // pick up programatic selections from the tree nav
      this.selected = true;
    }
  }
  calculatedPadding(selected) {
    const basePadding = selected ? 16 : 20;
    const indentPadding = 10;
    const calcPadding = basePadding + (this.level * indentPadding);
    return calcPadding.toString() + 'px';
  }
  handleSelected(selected, e) {
    this.selected = selected;
    this.uxplSelection.emit(this.treeId + '-' + this.config[this.idAttribute]);
    const selection = Object.assign(Object.assign({}, this.config), { children: undefined });
    delete selection.children;
    this.uxplSelected.emit(selection);
    e.stopPropagation();
  }
  handleToggleChildren(e) {
    this.showChildren = !this.showChildren;
    e.stopPropagation();
  }
  render() {
    var _a, _b, _c, _d, _e;
    if (this.config && this.config[this.idAttribute]) {
      return (h(Host, null,
        h("div", { class: {
            "tree-item": true,
            "selected": this.selected
          }, style: { 'padding-left': this.calculatedPadding(this.selected) }, onClick: (e) => this.handleSelected(true, e) },
          h("div", null, (_a = this.config) === null || _a === void 0 ? void 0 : _a.label),
          ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c.length) > 0 ?
            h("div", { class: {
                "menu-toggle-icon": true,
                "show-children": this.showChildren
              }, onClick: (e) => this.handleToggleChildren(e) },
              h("uxpl-icon", { icon: "pl-icon-caret-down", size: "24px", onClick: (e) => this.handleToggleChildren(e) }))
            : undefined),
        this.showChildren && ((_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.children) === null || _e === void 0 ? void 0 : _e.map((childItem) => h("uxpl-tree-menu-item", { class: "child-item", "selection-key": this.selectionKey, "election-key-delimitter": this.selectionKeyDelimitter, "id-attribute": this.idAttribute, "tree-id": this.treeId, config: childItem, level: this.level + 1, selected: false })))));
    }
    else {
      return 'Bad config for this tree item';
    }
  }
  static get is() { return "uxpl-tree-menu-item"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-tree-menu-item.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-tree-menu-item.css"]
  }; }
  static get properties() { return {
    "config": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "TreeConfig",
        "resolved": "TreeConfig",
        "references": {
          "TreeConfig": {
            "location": "import",
            "path": "../../models/treeNav"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "level": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "level",
      "reflect": false,
      "defaultValue": "0"
    },
    "selected": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "selected",
      "reflect": false,
      "defaultValue": "false"
    },
    "selectionKey": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "selection-key",
      "reflect": false
    },
    "selectionKeyDelimitter": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "selection-key-delimitter",
      "reflect": false,
      "defaultValue": "'>'"
    },
    "treeId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "tree-id",
      "reflect": false
    },
    "idAttribute": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "id-attribute",
      "reflect": false,
      "defaultValue": "'id'"
    }
  }; }
  static get states() { return {
    "showChildren": {}
  }; }
  static get events() { return [{
      "method": "uxplSelection",
      "name": "uxplSelection",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }, {
      "method": "uxplSelected",
      "name": "uxplSelected",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "TreeConfig",
        "resolved": "TreeConfig",
        "references": {
          "TreeConfig": {
            "location": "import",
            "path": "../../models/treeNav"
          }
        }
      }
    }]; }
  static get watchers() { return [{
      "propName": "selectionKey",
      "methodName": "handleSelectionKeyChange"
    }]; }
  static get listeners() { return [{
      "name": "uxplSelection",
      "method": "uxplSelectionHandler",
      "target": "document",
      "capture": false,
      "passive": false
    }]; }
}
