import { Component, Event, h, Prop, State } from '@stencil/core';
export class InputSelect {
  constructor() {
    this.isOpen = false;
    this.clickOutside = false;
    this.isActivateMenuIsTriggered = false;
    this.isInEditMode = true;
  }
  activateMenu() {
    this.isActivateMenuIsTriggered = true;
    this.isOpen = !this.isOpen;
    this.isOpenEmit.emit({ inputNr: this.numberOfInputSelect, isOpen: this.isOpen });
  }
  selectValueOption(str) {
    this.emitOptionValue.emit({ value: str, type: this.text });
    console.log(str);
    this.isOpen = !this.isOpen;
    this.valueToSee = str;
  }
  componentWillRender() {
    this.isOpen = this.triggerIsOpen;
    if (this.valueOfEdit && this.isInEditMode) {
      this.valueToSee = this.valueOfEdit;
      this.isInEditMode = false;
    }
  }
  componentShouldUpdate() {
    if (!this.isActivateMenuIsTriggered) {
      this.isOpen = this.triggerIsOpen;
    }
    this.valueToSee = this.valueOfEdit;
  }
  render() {
    return (h("div", { class: "items-selections" },
      h("button", { class: "card-select", onClick: () => this.activateMenu() },
        h("div", { class: "detail-card-select" },
          this.text,
          h("div", { class: "value-emitted" }, this.valueToSee)),
        h("div", { class: "separator" }),
        h("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
          h("path", { d: "M1.41 0.590027L6 5.17003L10.59 0.590027L12 2.00003L6 8.00003L0 2.00003L1.41 0.590027Z", fill: "#5D7FBA" }))),
      h("div", { id: "alloptionscontainer", class: "all-options-container" }, this.optionLabels.map((label) => h("div", { class: { 'option-elements': true, 'hidden': !this.isOpen }, onClick: () => this.selectValueOption(label) },
        h("div", null,
          h("div", null, label)))))));
  }
  static get is() { return "input-select"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["input-select.css"]
  }; }
  static get styleUrls() { return {
    "$": ["input-select.css"]
  }; }
  static get properties() { return {
    "text": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "text",
      "reflect": false
    },
    "triggerIsOpen": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "trigger-is-open",
      "reflect": false
    },
    "optionLabels": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "string[]",
        "resolved": "string[]",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "valueOfEdit": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "value-of-edit",
      "reflect": false
    },
    "numberOfInputSelect": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "number-of-input-select",
      "reflect": false
    }
  }; }
  static get states() { return {
    "isOpen": {},
    "clickOutside": {},
    "valueToSee": {}
  }; }
  static get events() { return [{
      "method": "emitOptionValue",
      "name": "emitOptionValue",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "{ value:string, type:string }",
        "resolved": "{ value: string; type: string; }",
        "references": {}
      }
    }, {
      "method": "isOpenEmit",
      "name": "isOpenEmit",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "{ inputNr: number, isOpen: boolean }",
        "resolved": "{ inputNr: number; isOpen: boolean; }",
        "references": {}
      }
    }]; }
}
