/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { Component, Host, h, Prop, State, Listen, Watch, Element, Event } from '@stencil/core';
import { hostContext } from '../../utils/theme';
import { chevronDown, chevronUp } from 'ionicons/icons';
export class GascoSelect {
  constructor() {
    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()))));
  }
  static get is() { return "gasco-select"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["gasco-select.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["gasco-select.css"]
  }; }
  static get properties() { return {
    "multiple": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "multiple",
      "reflect": false,
      "defaultValue": "false"
    },
    "choices": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "IChoiceProp[]",
        "resolved": "IChoiceProp[]",
        "references": {
          "IChoiceProp": {
            "location": "import",
            "path": "./gasco-select-interface"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The name of the control, which is submitted with the form data."
      },
      "attribute": "name",
      "reflect": false,
      "defaultValue": "this.selectId"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true`, the user cannot interact with the select."
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "placeholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Instructional text that show before the input has a value."
      },
      "attribute": "placeholder",
      "reflect": false,
      "defaultValue": "'Seleccione un elemento'"
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Instructional text that show before the input has a value.\nThe Input label."
      },
      "attribute": "label",
      "reflect": false
    }
  }; }
  static get states() { return {
    "value": {},
    "isChecked": {},
    "isExpanded": {}
  }; }
  static get events() { return [{
      "method": "gascoReadySelect",
      "name": "gascoReadySelect",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "gascoChangeSelect",
      "name": "gascoChangeSelect",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "IChoiceDetail",
        "resolved": "IChoiceDetail",
        "references": {
          "IChoiceDetail": {
            "location": "import",
            "path": "./gasco-select-interface"
          }
        }
      }
    }]; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "choices",
      "methodName": "handleChoices"
    }]; }
  static get listeners() { return [{
      "name": "click",
      "method": "handleWindowClick",
      "target": "window",
      "capture": false,
      "passive": false
    }]; }
}
let selectIds = 0;
