import { Component, h, Prop, State, Event, Listen } from '@stencil/core';
export class SynbeeSearchbox {
  constructor() {
    this.isOpen = false;
    this.type = 'text';
    this.searchResult = [];
  }
  onUserInput(event) {
    this.userInput = event.target.value;
    this.searchText = this.userInput;
  }
  onInputChangeValue(event) {
    this.value = event.target.value;
    this.valueChanged.emit(this.value);
  }
  toggle() {
    this.isOpen = !this.isOpen;
  }
  handleKeyDown(ev) {
    if (ev.key === 'Enter') {
      console.log('Enter pressed, searchResult update: ', this.searchResult);
      this.searchResult.push(this.value);
      this.stringSearched.emit(this.value);
    }
  }
  onRowClicked(name) {
    this.selectValueSearched.emit(name);
    console.log(name, ' emesso');
    this.isOpen = !this.isOpen;
  }
  render() {
    return (h("div", { class: "container" },
      h("input", { onClick: () => this.toggle(), onInput: this.onInputChangeValue.bind(this), class: "searchbox", value: this.value, placeholder: this.label }),
      h("div", { class: {
          'searchbox': true,
          'hidden': !this.isOpen
        } },
        h("div", { class: "searched-value-container" },
          h("table", null, this.searchResult.map(s => (h("tr", { class: "row-search", onClick: this.onRowClicked.bind(this, s) },
            h("td", null, s)))))))));
  }
  static get is() { return "synbee-searchbox"; }
  static get originalStyleUrls() { return {
    "$": ["synbee-searchbox.css"]
  }; }
  static get styleUrls() { return {
    "$": ["synbee-searchbox.css"]
  }; }
  static get properties() { return {
    "label": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "label",
      "reflect": true
    },
    "value": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "value",
      "reflect": true
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'text'"
    },
    "searchResult": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "string[]",
        "resolved": "string[]",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "[]"
    }
  }; }
  static get states() { return {
    "isOpen": {}
  }; }
  static get events() { return [{
      "method": "stringSearched",
      "name": "stringSearched",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }, {
      "method": "valueChanged",
      "name": "valueChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }, {
      "method": "selectValueSearched",
      "name": "selectValueSearched",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }]; }
  static get listeners() { return [{
      "name": "keydown",
      "method": "handleKeyDown",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
