import { Component, h, Host, Element, Event, Prop, Listen, State, Watch, Method } from '@stencil/core';
export class Select {
  constructor() {
    this.optionElements = new Map();
    this.textToScrollTo = '';
    this.label = '';
    this.remote = false;
    this.disabled = false;
    this.typeahead = false;
    this.loading = false;
    this.placeholder = '';
    this.scrollable = 250;
    this.options = [];
  }
  optionsChanged() {
    if (this.options.length === 0) {
      this.dropdownElement.close();
    }
  }
  async optionSelect(event) {
    var _a, _b;
    event.preventDefault();
    event.stopPropagation();
    this.value = Object.assign({}, event.detail);
    this.balChange.emit(event.detail);
    await ((_a = this.dropdownElement) === null || _a === void 0 ? void 0 : _a.toggle());
    this.dispatchEventToOptions(this.buildCustomEvent('balSelectChanged', this.value));
    this.inputElement.value = (_b = this.value) === null || _b === void 0 ? void 0 : _b.text;
  }
  async clear() {
    this.value = null;
    this.inputElement.value = '';
    this.dispatchEventToOptions(this.buildCustomEvent('balSelectChanged', this.value));
  }
  async onInputClick(event) {
    var _a;
    this.balClick.emit(event);
    if (!this.typeahead) {
      await ((_a = this.dropdownElement) === null || _a === void 0 ? void 0 : _a.toggle());
    }
  }
  onInput(event) {
    const inputValue = event.target.value;
    this.balInput.emit(inputValue);
    if (!this.remote) {
      this.dispatchEventToOptions(this.buildCustomEvent('balSelectInput', inputValue));
    }
    if (this.options.length > 0) {
      this.dropdownElement.open();
    }
  }
  onKeyPress(event) {
    this.balKeyPress.emit(event);
    if (!this.typeahead) {
      this.textToScrollTo = this.textToScrollTo + event.key;
      clearTimeout(this.clearScrollToValue);
      this.clearScrollToValue = setTimeout(() => {
        this.scrollToText(this.textToScrollTo);
        this.textToScrollTo = '';
      }, 600);
    }
  }
  render() {
    var _a;
    this.optionElements.clear();
    return (h(Host, null,
      h("bal-dropdown", { scrollable: this.scrollable, ref: el => (this.dropdownElement = el) },
        h("div", { class: "control has-icons-right", slot: "trigger" },
          h("input", { class: "input clickable", readonly: !this.typeahead, disabled: this.disabled, placeholder: this.placeholder, autoComplete: "off", value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.text, onInput: e => this.onInput(e), onBlur: e => this.balBlur.emit(e), onClick: e => this.onInputClick(e), onKeyDown: e => this.balKeyDown.emit(e), onKeyPress: e => this.onKeyPress(e), onKeyUp: e => this.balKeyUp.emit(e), onFocus: e => this.balFocus.emit(e), ref: el => (this.inputElement = el) }),
          h("bal-icon", { size: "medium", rotate: this.loading, name: this.loading ? 'refresh' : this.typeahead ? 'search' : 'caret-down', "is-right": true })),
        this.options.map(option => (h("bal-select-option", { ref: el => this.optionElements.set(option.value, el), value: option }))))));
  }
  async scrollToText(text) {
    const dropdownContentElement = await this.dropdownElement.getContentElement();
    const option = this.options.find(option => option.text.startsWith(text));
    const optionElement = this.optionElements.get(option.value);
    dropdownContentElement.scrollTop = optionElement.offsetTop;
  }
  dispatchEventToOptions(event) {
    const options = this.element.querySelectorAll('bal-select-option');
    options.forEach(o => o.dispatchEvent(event));
  }
  buildCustomEvent(typeArg, detail) {
    return new CustomEvent(typeArg, { detail });
  }
  static get is() { return "bal-select"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["bal-select.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["bal-select.css"]
  }; }
  static get properties() { return {
    "remote": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "remote",
      "reflect": false,
      "defaultValue": "false"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "typeahead": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "typeahead",
      "reflect": false,
      "defaultValue": "false"
    },
    "loading": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "loading",
      "reflect": false,
      "defaultValue": "false"
    },
    "placeholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "placeholder",
      "reflect": false,
      "defaultValue": "''"
    },
    "scrollable": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "scrollable",
      "reflect": false,
      "defaultValue": "250"
    },
    "value": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "BalOptionValue<any>",
        "resolved": "BalOptionValue<any>",
        "references": {
          "BalOptionValue": {
            "location": "import",
            "path": "../bal-select-option/bal-select-option.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "options": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "BalOptionValue<any>[]",
        "resolved": "BalOptionValue<any>[]",
        "references": {
          "BalOptionValue": {
            "location": "import",
            "path": "../bal-select-option/bal-select-option.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "[]"
    }
  }; }
  static get states() { return {
    "textToScrollTo": {},
    "label": {}
  }; }
  static get events() { return [{
      "method": "balChange",
      "name": "balChange",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "BalOptionValue<any>",
        "resolved": "BalOptionValue<any>",
        "references": {
          "BalOptionValue": {
            "location": "import",
            "path": "../bal-select-option/bal-select-option.type"
          }
        }
      }
    }, {
      "method": "balInput",
      "name": "balInput",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }, {
      "method": "balBlur",
      "name": "balBlur",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "FocusEvent",
        "resolved": "FocusEvent",
        "references": {
          "FocusEvent": {
            "location": "global"
          }
        }
      }
    }, {
      "method": "balFocus",
      "name": "balFocus",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "FocusEvent",
        "resolved": "FocusEvent",
        "references": {
          "FocusEvent": {
            "location": "global"
          }
        }
      }
    }, {
      "method": "balClick",
      "name": "balClick",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "MouseEvent",
        "resolved": "MouseEvent",
        "references": {
          "MouseEvent": {
            "location": "global"
          }
        }
      }
    }, {
      "method": "balKeyDown",
      "name": "balKeyDown",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "KeyboardEvent",
        "resolved": "KeyboardEvent",
        "references": {
          "KeyboardEvent": {
            "location": "global"
          }
        }
      }
    }, {
      "method": "balKeyPress",
      "name": "balKeyPress",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "KeyboardEvent",
        "resolved": "KeyboardEvent",
        "references": {
          "KeyboardEvent": {
            "location": "global"
          }
        }
      }
    }, {
      "method": "balKeyUp",
      "name": "balKeyUp",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "KeyboardEvent",
        "resolved": "KeyboardEvent",
        "references": {
          "KeyboardEvent": {
            "location": "global"
          }
        }
      }
    }]; }
  static get methods() { return {
    "clear": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "element"; }
  static get watchers() { return [{
      "propName": "options",
      "methodName": "optionsChanged"
    }]; }
  static get listeners() { return [{
      "name": "balOptionSelect",
      "method": "optionSelect",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
