import { Component, h, Host, Listen, Prop, State } from "@stencil/core";
import { SelectivelyType } from "../model";
export class IntergiroAutocompleteInput {
  constructor() {
    this.lastValue = "";
    this.options = [];
    this.showSuggestion = false;
    this.value = "";
  }
  componentDidRender() {
    var _a;
    (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.filterOptions("");
  }
  inputValueChangeHandler(event) {
    if (event.detail) {
      this.value = event.detail.value;
      this.setInvisibleDiv(event.detail.value);
    }
  }
  optionSelectHandler(event) {
    if (event.detail) {
      this.inputElement.setKeepFocusOnReRender(true);
      this.select(event.detail.value);
    }
    event.stopPropagation();
  }
  onKeyDown(event) {
    var _a;
    if (event.key == "ArrowUp" || event.key == "ArrowDown")
      this.showSuggestion
        ? this.menuElement.moveHighlight(event.key == "ArrowUp" ? -1 : 1)
        : (this.showSuggestion = true);
    else if (event.key == "Escape")
      this.showSuggestion = false;
    else if (event.key == "Enter" && this.showSuggestion) {
      (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.getHighlighted().then((result) => {
        result && this.select(result.value);
      });
      this.options && this.options.length > 0 && event.preventDefault();
    }
  }
  onKeyUp(event) {
    if (this.inputElement.value != this.lastValue) {
      this.lastValue = this.inputElement.value;
      this.suggest();
    }
  }
  suggest() {
    if (this.inputElement && this.inputElement.value != undefined && this.menuElement && this.template) {
      const completion = SelectivelyType.complete(this.template, this.inputElement.value);
      const oldOptions = this.options;
      this.options = completion.map(c => {
        var _a;
        return { value: c, name: (_a = c.addon) !== null && _a !== void 0 ? _a : "", description: c.description };
      });
      const optionsChanged = oldOptions.map(o => o.value.full).join(",") != this.options.map(o => o.value.full).join(",");
      if (optionsChanged)
        this.showSuggestion = true;
      this.menuElement.setHighlight(0);
    }
  }
  select(newSelection) {
    const newString = newSelection.full;
    this.inputElement.value = newString;
    this.setInvisibleDiv(newString);
    const cursorPosition = newSelection.cursor && typeof newSelection.cursor == "number" ? newSelection.cursor : newString.length;
    this.inputElement.setSelectionRange(cursorPosition, cursorPosition);
  }
  setInvisibleDiv(newValue) {
    if (newValue)
      this.invisibleDiv.innerHTML = newValue.replace(/ /g, "&nbsp;");
    if (newValue == "")
      this.invisibleDiv.innerHTML = "&nbsp;";
  }
  render() {
    return (h(Host, { "has-suggestion": this.options && this.options.length > 0, "show-suggestion": this.showSuggestion, onClick: () => {
        this.showSuggestion = true;
        this.suggest();
      }, onKeyDown: (e) => this.onKeyDown(e), onKeyUp: (e) => this.onKeyUp(e) },
      h("div", null,
        h("div", { ref: (el) => (this.invisibleDiv = el) }, "\u00A0"),
        h("smoothly-menu-options", { ref: (el) => (this.menuElement = el), style: { width: "300px" }, "empty-menu-label": "", "max-menu-height": "200px", options: this.options })),
      h("smoothly-input", { ref: (el) => (this.inputElement = el !== null && el !== void 0 ? el : this.inputElement), name: this.name, autocomplete: false, value: this.value },
        h("slot", null))));
  }
  static get is() { return "ig-autocomplete-input"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "template": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "SelectivelyType",
        "resolved": "Base",
        "references": {
          "SelectivelyType": {
            "location": "import",
            "path": "../model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "value": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "value",
      "reflect": false,
      "defaultValue": "\"\""
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "name",
      "reflect": false
    }
  }; }
  static get states() { return {
    "options": {},
    "showSuggestion": {}
  }; }
  static get listeners() { return [{
      "name": "smoothlyChanged",
      "method": "inputValueChangeHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "optionSelect",
      "method": "optionSelectHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
