/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
'use strict';

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

const index = require('./index-9c2d04b3.js');
const theme = require('./theme-dfe81c2b.js');
const index$1 = require('./index-94ee0584.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 = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.gascoReadySelect = index.createEvent(this, "gascoReadySelect", 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.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 }) => (index.h("gasco-item", { disabled: disabled, onClick: (e) => this.onSelect(e, label, value) }, this.multiple &&
      index.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 (index.h(index.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': theme.hostContext('gasco-item', el),
        [`gasco-color-${disabled ? 'light' : 'primary'}`]: true
      } }, index.h("div", { class: "select-native" }, index.h("gasco-input", { readonly: true, value: value, label: label, disabled: disabled, onClick: this.onClick, placeholder: placeholder }, index.h("ion-icon", { slot: "end", lazy: false, icon: isExpanded ? index$1.chevronUp : index$1.chevronDown, onClick: () => this.isExpanded = !isExpanded })), index.h("gasco-list", null, this.getChoices().length > 0 && isExpanded && this.renderItem()))));
  }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "choices": ["handleChoices"]
  }; }
};
let selectIds = 0;
GascoSelect.style = gascoSelectCss;

exports.gasco_select = GascoSelect;
