'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-df541290.js');
require('./model-7d89452f.js');
const index$1 = require('./index-bdcc5560.js');
require('./index-fe50ed35.js');
require('./_commonjsHelpers-5bbc2693.js');
require('./index-c277d1ea.js');

const styleCss = ".sc-payfunc-autocomplete-input-h{display:block;font-family:var(--smoothly-font-family)}.sc-payfunc-autocomplete-input-h>div.sc-payfunc-autocomplete-input:nth-child(1){position:absolute;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;padding:1em 0.2em 0.2em 0.2em;white-space:nowrap}.sc-payfunc-autocomplete-input-h>div.sc-payfunc-autocomplete-input:nth-child(1)>div.sc-payfunc-autocomplete-input:nth-child(1){color:transparent;pointer-events:none;user-select:none;font-size:1rem;font-family:var(--smoothly-font-family)}.sc-payfunc-autocomplete-input-h>div.sc-payfunc-autocomplete-input:nth-child(1) smoothly-menu-options.sc-payfunc-autocomplete-input{grid-column-start:2;grid-row-start:2;z-index:99}.sc-payfunc-autocomplete-input-h:not(:focus-within) smoothly-menu-options.sc-payfunc-autocomplete-input{display:none}.sc-payfunc-autocomplete-input-h:not([has-suggestion]) smoothly-menu-options.sc-payfunc-autocomplete-input,.sc-payfunc-autocomplete-input-h:not([show-suggestion]) smoothly-menu-options.sc-payfunc-autocomplete-input{display:none}.sc-payfunc-autocomplete-input-h smoothly-input.sc-payfunc-autocomplete-input input.sc-payfunc-autocomplete-input{color:rgb(var(--smoothly-default-contrast))}";

const PayfuncAutocompleteInput = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    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 = index$1.dist.Type.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 (index.h(index.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) }, index.h("div", null, index.h("div", { ref: (el) => (this.invisibleDiv = el) }, "\u00A0"), index.h("smoothly-menu-options", { ref: (el) => (this.menuElement = el), style: { width: "300px" }, "empty-menu-label": "", "max-menu-height": "200px", options: this.options })), index.h("smoothly-input", { ref: (el) => (this.inputElement = el !== null && el !== void 0 ? el : this.inputElement), name: this.name, autocomplete: false, value: this.value }, index.h("slot", null))));
  }
};
PayfuncAutocompleteInput.style = styleCss;

exports.payfunc_autocomplete_input = PayfuncAutocompleteInput;
