import { Component, Element, Event, h, Prop } from "@stencil/core";
import { modifiersToClass, numberFormat } from '../../utils/utils';
export class IbkNumberPicker {
  constructor() {
    /** Define el tamaño del selector<br>
     * <strong>Medium: </strong>el ancho será para un número de dos dígitos<br>
     * <strong>Large: </strong>el ancho será para un número de hasta 8 dígitos<br>
     * <strong>Full: </strong>ocupará el 100% del ancho disponible
     */
    this.size = 'medium';
    /** Determina el número máximo del selector, por defecto será 100,000 */
    this.max = 10;
    /** Determina el número mínimo del selector, por defecto será 0 */
    this.min = 0;
    /** Determina si el número se puede editar manualmente, por defecto solo se usarán los ícono de más y menos */
    this.editable = false;
    /** Define la cantidad de números que se agregarán o quitarán a al valor actual */
    this._bounce = 1;
    /** Configura la clase del componente basado en estados y modificadores */
    this.containerClass = () => {
      return modifiersToClass('ibk-number-picker', [this.size]);
    };
    /** Define de cuánto en cuánto cambiará el número al dar click en los botones más o menos */
    this.setBounce = () => {
      if (this._action == 'add') {
        if (this.current >= 0 && this.current < 20) {
          this._bounce = 1;
        }
        else if (this.current >= 20 && this.current < 999) {
          this._bounce = 10;
        }
        else if (this.current >= 100 && this.current < 9999) {
          this._bounce = 100;
        }
        else {
          this._bounce = 1000;
        }
      }
      else {
        if (this.current >= 0 && this.current <= 20) {
          this._bounce = 1;
        }
        else if (this.current > 20 && this.current <= 1000) {
          this._bounce = 10;
        }
        else if (this.current > 100 && this.current <= 10000) {
          this._bounce = 100;
        }
        else {
          this._bounce = 1000;
        }
      }
    };
    /** Acción cuando se da click sobre los botones más o menos */
    this.changeQuantity = (action) => {
      this._action = action;
      if (this._action == 'add') {
        this.current += this._bounce;
        if (this.current > this.max) {
          this.current = this.max;
        }
      }
      else {
        this.current -= this._bounce;
        if (this.current < this.min) {
          this.current = this.min;
        }
      }
      this.setBounce();
      this._currentFormated = numberFormat(this.current);
      this.onchange.emit({
        number: this.current,
        formated: this._currentFormated
      });
    };
    /** Se ejecutá cuando el usuario digita manualmente el número en el calendario */
    this.typeNumber = (e) => {
      const t = e.target;
      if (t.value == '') {
        this.current = this.min;
      }
      else {
        this.current = parseInt(t.value.replace(/,/, ''));
        this.current = (isNaN(this.current) || t.value == '') ? 0 : this.current;
        if (this.current <= this.min) {
          this.current = this.min;
        }
        else if (this.current >= this.max) {
          this.current = this.max;
        }
      }
      this._currentFormated = numberFormat(this.current);
      const input = this.host.querySelector('.ibk-number-picker__input');
      input.value = this._currentFormated;
      this.setBounce();
      this.onchange.emit({
        number: this.current,
        formated: this._currentFormated
      });
    };
  }
  componentWillLoad() {
    var _a;
    this.current = (_a = this.current) !== null && _a !== void 0 ? _a : this.max;
    this._currentFormated = numberFormat(this.current);
    this.setBounce();
  }
  render() {
    return (h("div", { class: this.containerClass() },
      h("button", { type: "button", class: 'ibk-number-picker__button' + (this.current <= this.min ? ' ibk-number-picker__button--disabled' : ''), onClick: () => this.changeQuantity('remove') },
        h("i", { class: "ibk-number-picker__button-icon icon-xs-minus" })),
      h("input", { type: "text", class: "ibk-number-picker__input", value: this._currentFormated, readOnly: !this.editable, onInput: this.typeNumber }),
      h("button", { type: "button", class: 'ibk-number-picker__button' + (this.current >= this.max ? ' ibk-number-picker__button--disabled' : ''), onClick: () => this.changeQuantity('add') },
        h("i", { class: "ibk-number-picker__button-icon icon-xs-plus" }))));
  }
  static get is() { return "ibk-number-picker"; }
  static get originalStyleUrls() { return {
    "$": ["number-picker.css"]
  }; }
  static get styleUrls() { return {
    "$": ["number-picker.css"]
  }; }
  static get properties() { return {
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'medium' | 'large' | 'full'",
        "resolved": "\"full\" | \"large\" | \"medium\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define el tama\u00F1o del selector<br>\r\n<strong>Medium: </strong>el ancho ser\u00E1 para un n\u00FAmero de dos d\u00EDgitos<br>\r\n<strong>Large: </strong>el ancho ser\u00E1 para un n\u00FAmero de hasta 8 d\u00EDgitos<br>\r\n<strong>Full: </strong>ocupar\u00E1 el 100% del ancho disponible"
      },
      "attribute": "size",
      "reflect": false,
      "defaultValue": "'medium'"
    },
    "max": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Determina el n\u00FAmero m\u00E1ximo del selector, por defecto ser\u00E1 100,000"
      },
      "attribute": "max",
      "reflect": false,
      "defaultValue": "10"
    },
    "min": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Determina el n\u00FAmero m\u00EDnimo del selector, por defecto ser\u00E1 0"
      },
      "attribute": "min",
      "reflect": false,
      "defaultValue": "0"
    },
    "current": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Determina el n\u00FAmero actual en el selector"
      },
      "attribute": "current",
      "reflect": false
    },
    "editable": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Determina si el n\u00FAmero se puede editar manualmente, por defecto solo se usar\u00E1n los \u00EDcono de m\u00E1s y menos"
      },
      "attribute": "editable",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get events() { return [{
      "method": "onchange",
      "name": "onchange",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Evento al cambiar el n\u00FAmero con los botones m\u00E1s y menos, o digitando manualmente"
      },
      "complexType": {
        "original": "NumberPickerEvent",
        "resolved": "NumberPickerEvent",
        "references": {
          "NumberPickerEvent": {
            "location": "local"
          }
        }
      }
    }]; }
  static get elementRef() { return "host"; }
}
