'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-d0a4f2de.js');
const theme = require('./theme-43f2cd83.js');
const index$1 = require('./index-f2cd2f39.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:100%}:host(.select-expanded) .select-native gasco-list{opacity:1;visibility:visible}";

const GascoSelect = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.gascoReady = index.createEvent(this, "gascoReady", 7);
    this.gascoChangeSelect = index.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.gascoReady.emit();
  }
  componentDidLoad() {
    this.getChoices();
  }
  onSelect(e, label, value) {
    e.preventDefault();
    if (!this.multiple) {
      e.stopPropagation();
      this.value = label;
      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;
    }
  }
  render() {
    const { el, isExpanded, disabled, value: v, multiple, placeholder, label } = this;
    return (index.h(index.Host, { role: "button", "aria-haspopup": "listbox", "aria-disabled": disabled ? 'true' : null, class: {
        'in-item': theme.hostContext('gasco-item', el),
        'select-disabled': disabled,
        'gasco-select': true,
        'select-expanded': isExpanded,
        'gasco-color': true,
        'gasco-color-primary': true
      } }, index.h("div", { class: "select-native" }, index.h("gasco-input", { readonly: true, value: v, label: label, onClick: this.onClick, placeholder: placeholder }, index.h("ion-icon", { slot: "end", lazy: false, icon: isExpanded ? index$1.chevronUp : index$1.chevronDown })), index.h("gasco-list", null, this.getChoices().length > 0 && isExpanded && (this.getChoices().map(({ label, value, disabled }) => (index.h("gasco-item", { disabled: disabled, onClick: (e) => this.onSelect(e, label, value) }, multiple &&
      index.h("gasco-checkbox", { slot: "start", color: "primary", checked: this.element.some(item => item.label === label) }), label))))))));
  }
  get el() { return index.getElement(this); }
};
let selectIds = 0;
GascoSelect.style = gascoSelectCss;

exports.gasco_select = GascoSelect;
