import { Component, Element, h, Host, Method, Prop } from '@stencil/core';
import { NewBalOptionValue } from './bal-select-option.util';
export class SelectOption {
  constructor() {
    this.inputId = `bal-selopt-${selectOptionIds++}`;
    /**
     * If `true` the option is hidden
     */
    this.hidden = true;
    /**
     * Baloise icon as a prefix
     */
    this.icon = '';
    /**
     * If `true` the option is focused
     */
    this.focused = false;
    /**
     * If `true` the option is selected
     */
    this.selected = false;
    /**
     * If `true` the option has a checkbox
     */
    this.checkbox = false;
  }
  async getOption() {
    return this.option;
  }
  get option() {
    return NewBalOptionValue(this.value, this.label);
  }
  connectedCallback() {
    this.parent = this.element.closest('bal-select');
    this.parent.sync();
  }
  disconnectedCallback() {
    this.parent.sync();
  }
  onClick() {
    this.parent.select(this.option);
  }
  render() {
    return (h(Host, { role: "option", id: this.inputId, onClick: () => this.onClick() },
      h("button", { class: [
          'dropdown-item',
          this.selected ? 'is-selected' : '',
          this.hidden ? 'is-hidden' : '',
          this.focused ? 'is-focused' : '',
          this.icon ? 'has-icon' : '',
          this.checkbox ? 'has-checkbox' : '',
        ].join(' '), tabIndex: -1 },
        h("div", { class: "select-option__content" },
          h("span", { class: "checkbox", style: { display: this.checkbox ? 'flex' : 'none' } },
            h("bal-checkbox", { checked: this.selected, tabindex: -1 })),
          h("span", { class: "label" },
            h("slot", null))))));
  }
  static get is() { return "bal-select-option"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["bal-select-option.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["bal-select-option.css"]
  }; }
  static get properties() { return {
    "value": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The value of the dropdown item. This value will be returned by the parent <bal-dropdown> element."
      },
      "attribute": "value",
      "reflect": false
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Label will be shown in the input element when it got selected"
      },
      "attribute": "label",
      "reflect": false
    },
    "hidden": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the option is hidden"
      },
      "attribute": "hidden",
      "reflect": false,
      "defaultValue": "true"
    },
    "icon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Baloise icon as a prefix"
      },
      "attribute": "icon",
      "reflect": false,
      "defaultValue": "''"
    },
    "focused": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the option is focused"
      },
      "attribute": "focused",
      "reflect": false,
      "defaultValue": "false"
    },
    "selected": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the option is selected"
      },
      "attribute": "selected",
      "reflect": false,
      "defaultValue": "false"
    },
    "checkbox": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the option has a checkbox"
      },
      "attribute": "checkbox",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get methods() { return {
    "getOption": {
      "complexType": {
        "signature": "() => Promise<BalOptionValue<any>>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          },
          "BalOptionValue": {
            "location": "import",
            "path": "./bal-select-option.type"
          }
        },
        "return": "Promise<BalOptionValue<any>>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "element"; }
}
let selectOptionIds = 0;
