import { Component, Host, h, Event, Prop } from '@stencil/core';
export class UxplChipletInput {
  constructor() {
    this.value = [];
    this.showClose = true;
    /**
    * Type (classic/square)
    */
    this.type = 'square';
    this.caseSensitive = false;
    /**
     * Send an event containing the new text as it is typed.
     */
    this.allKeys = false;
    this.idx = 0;
    this.textVal = undefined;
  }
  handleRemoveTag(chip) {
    this.value = this.value.filter(val => {
      return val !== chip;
    });
    this.uxplChanged.emit(this.value);
  }
  handleKeys(e) {
    var _a, _b;
    // capture tab
    const tabKey = 9;
    const enterKey = 13;
    const backKey = 8;
    const separatorDetected = this.separator && e.key === this.separator;
    if (this.allKeys) {
      this.inputChanged.emit(this.inputBox.value);
    }
    if (separatorDetected || e.keyCode === tabKey || e.keyCode === enterKey && ((_b = (_a = this.inputBox) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) > 0) {
      if (separatorDetected) {
        this.inputBox.value = this.inputBox.value.replace(this.separator, '');
      }
      this.inputBox.value = this.inputBox.value.trim();
      if (this.inputBox.value.length > 0) {
        // add - but remove duplicates
        if (this.caseSensitive) {
          this.value = [...new Set([...this.value, this.inputBox.value])];
        }
        else {
          if (this.value) {
            const idxExisting = this.value.findIndex(val => { return val.toLowerCase() === this.inputBox.value.toLocaleLowerCase(); });
            if (idxExisting === -1) {
              this.value = [...this.value, this.inputBox.value];
            }
          }
        }
        this.inputBox.value = '';
        this.uxplChanged.emit(this.value);
      }
    }
    else if (e.keyCode === backKey) {
      if (!this.lastLength || this.lastLength <= 0) {
        this.handleRemoveTag(this.value.pop());
      }
    }
    this.lastLength = this.inputBox.value.length;
  }
  render() {
    var _a;
    return (h(Host, null,
      h("div", { class: "control-container", part: "chip-input-control", onClick: () => this.inputBox.focus() },
        h("div", { class: "chip-input-container", part: "chip-input-container" },
          h("div", { class: {
              "label": true,
              "label-above": this.labelAbove
            }, part: "label" }, this.label),
          h("div", { class: "chips", part: "chips" }, (_a = this.value) === null || _a === void 0 ? void 0 :
            _a.map(chip => h("uxpl-chiplet", { showClose: this.showClose, onClosed: () => this.handleRemoveTag(chip), closeButtonColor: this.type.toLowerCase() === 'square' ? (this.closeButtonColor ? this.closeButtonColor : '#1774e5') : undefined, backgroundColor: this.backgroundColor, textColor: this.textColor, type: this.type }, chip)),
            h("input", { ref: (el) => this.inputBox = el, class: {
                "chip-input": true
              }, part: "input", onKeyUp: (e) => this.handleKeys(e) }))),
        h("div", { class: "hint", part: "hint" }, this.hint))));
  }
  static get is() { return "uxpl-chiplet-input"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-chiplet-input.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-chiplet-input.css"]
  }; }
  static get properties() { return {
    "value": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "string[]",
        "resolved": "string[]",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "[]"
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "label",
      "reflect": false
    },
    "hint": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "hint",
      "reflect": false
    },
    "labelAbove": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "label-above",
      "reflect": false
    },
    "separator": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "separator",
      "reflect": false
    },
    "showClose": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show-close",
      "reflect": false,
      "defaultValue": "true"
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Type (classic/square)"
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'square'"
    },
    "caseSensitive": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "case-sensitive",
      "reflect": false,
      "defaultValue": "false"
    },
    "backgroundColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Background color of the chiplet."
      },
      "attribute": "background-color",
      "reflect": false
    },
    "textColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Text color of the chiplet."
      },
      "attribute": "text-color",
      "reflect": false
    },
    "closeButtonColor": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Close button color"
      },
      "attribute": "close-button-color",
      "reflect": false
    },
    "allKeys": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Send an event containing the new text as it is typed."
      },
      "attribute": "all-keys",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get events() { return [{
      "method": "uxplChanged",
      "name": "uxplChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "string[]",
        "resolved": "string[]",
        "references": {}
      }
    }, {
      "method": "inputChanged",
      "name": "inputChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }]; }
}
