/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { h as hostContext } from './theme.js';
import { b as chevronUp, c as chevronDown } from './index2.js';
import { d as defineCustomElement$6 } from './gasco-checkbox2.js';
import { d as defineCustomElement$5 } from './gasco-input2.js';
import { d as defineCustomElement$4 } from './gasco-item2.js';
import { d as defineCustomElement$3 } from './gasco-list2.js';
import { d as defineCustomElement$2 } from './icon.js';

const gascoSelectCss = ":host(.gasco-select){width:100%;max-width:400px}.select-native{position:relative;width:100%;max-width:400px}.select-native gasco-input,.select-native gasco-list{max-width:100%}.select-native gasco-list{position:absolute;left:0;right:0;top:55px;z-index:100;opacity:0;contain:layout;visibility:hidden;transition:300ms;width:98%;margin:0 auto}:host(.select-expanded) gasco-list{opacity:1;visibility:visible}:host(.select-expanded:not(.select-disabled)) ion-icon{color:var(--gasco-color-primary, #00A3E0)}";

const GascoSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.gascoReadySelect = createEvent(this, "gascoReadySelect", 7);
    this.gascoChangeSelect = createEvent(this, "gascoChangeSelect", 7);
    this.selectId = `gasco-sel-${selectIds++}`;
    this.element = [];
    this.multiple = false;
    /**
     * The name of the control, which is submitted with the form data.
     */
    this.name = this.selectId;
    /**
     * If `true`, the user cannot interact with the select.
     */
    this.disabled = false;
    /**
     * Instructional text that show before the input has a value.
     */
    this.placeholder = 'Seleccione un elemento';
    this.isExpanded = false;
    this.onClick = () => {
      // if (this.disabled || this.isExpanded) {
      //   return undefined;
      // }
      if (!this.isExpanded) {
        this.isExpanded = true;
      }
      else {
        this.isExpanded = false;
      }
    };
  }
  componentWillLoad() {
    this.gascoReadySelect.emit();
  }
  handleChoices() {
    this.getChoices();
  }
  componentDidLoad() {
    this.getChoices();
  }
  onSelect(e, label, value) {
    e.preventDefault();
    if (!this.multiple) {
      this.value = label;
      this.isExpanded = false;
      e.stopPropagation();
      return;
    }
    const isItem = this.element.some(item => label === item.label);
    if (isItem) {
      var newArray = this.element.filter(item => item.label !== label);
      this.element = newArray;
    }
    else {
      this.element.push({ label, value });
    }
    const getLabel = this.element.map(item => item.label);
    const getValue = this.element.map(item => item.value);
    this.value = this.parseValue(getLabel);
    this.gascoChangeSelect.emit({ target: this.el, detail: getValue.join(',') });
    e.stopPropagation();
  }
  parseValue(value) {
    if (value == null) {
      return undefined;
    }
    if (Array.isArray(value) && value.length > 1) {
      return value.join(', ');
    }
    return value.join('');
  }
  getChoices() {
    const pageSelects = this.choices
      ? this.choices.map((choice) => {
        return choice;
      })
      : [];
    return pageSelects;
  }
  handleWindowClick(e) {
    if (!this.el.contains(e.target) && this.isExpanded) {
      this.isExpanded = false;
    }
  }
  renderItem() {
    return this.getChoices().map(({ label, value, disabled }) => (h("gasco-item", { disabled: disabled, onClick: (e) => this.onSelect(e, label, value) }, this.multiple &&
      h("gasco-checkbox", { slot: "start", color: "primary", checked: this.element.some(item => item.label === label) }), label)));
  }
  render() {
    const { el, isExpanded, disabled, value, placeholder, label } = this;
    return (h(Host, { role: "button", "aria-haspopup": "listbox", "aria-disabled": disabled ? 'true' : null, class: {
        'gasco-color': true,
        'gasco-select': true,
        'select-disabled': disabled,
        'select-expanded': isExpanded,
        'in-item': hostContext('gasco-item', el),
        [`gasco-color-${disabled ? 'light' : 'primary'}`]: true
      } }, h("div", { class: "select-native" }, h("gasco-input", { readonly: true, value: value, label: label, disabled: disabled, onClick: this.onClick, placeholder: placeholder }, h("ion-icon", { slot: "end", lazy: false, icon: isExpanded ? chevronUp : chevronDown, onClick: () => this.isExpanded = !isExpanded })), h("gasco-list", null, this.getChoices().length > 0 && isExpanded && this.renderItem()))));
  }
  get el() { return this; }
  static get watchers() { return {
    "choices": ["handleChoices"]
  }; }
  static get style() { return gascoSelectCss; }
}, [1, "gasco-select", {
    "multiple": [4],
    "choices": [16],
    "name": [1],
    "disabled": [4],
    "placeholder": [1],
    "label": [1],
    "value": [32],
    "isChecked": [32],
    "isExpanded": [32]
  }, [[8, "click", "handleWindowClick"]]]);
let selectIds = 0;
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["gasco-select", "gasco-checkbox", "gasco-input", "gasco-item", "gasco-list", "ion-icon"];
  components.forEach(tagName => { switch (tagName) {
    case "gasco-select":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, GascoSelect$1);
      }
      break;
    case "gasco-checkbox":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "gasco-input":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "gasco-item":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "gasco-list":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "ion-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const GascoSelect = GascoSelect$1;
const defineCustomElement = defineCustomElement$1;

export { GascoSelect, defineCustomElement };
