'use strict';

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

const index = require('./index-e0385008.js');

const selectTagsCss = "fireenjin-select-tags{display:block;overflow:visible !important;position:relative;z-index:9}fireenjin-select-tags ion-label{align-self:unset !important;color:var(--ion-text-color, #000);font-size:12px;font-weight:bold;font-family:arial;display:inline-block;background:transparent;text-align:left;padding:2px 35px 8px 0;font-family:var(--ion-font-family);color:var(--ion-text-color, #000) !important}fireenjin-select-tags .invalid{--border-color:var(--ion-color-danger) !important}fireenjin-select-tags .invalid ion-label{color:var(--ion-color-danger) !important}fireenjin-select-tags .valid{--border-color:var(--ion-color-success) !important}fireenjin-select-tags .valid ion-label{color:var(--ion-color-success) !important}fireenjin-select-tags ion-item{--background:transparent !important}fireenjin-select-tags .options-wrapper{height:50px}fireenjin-select-tags fireenjin-chip-bar{position:absolute;left:0;right:0;bottom:0;height:50px}";

const SelectTags = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.ionChange = index.createEvent(this, "ionChange", 7);
    this.fireenjinFetch = index.createEvent(this, "fireenjinFetch", 7);
    this.fireenjinTrigger = index.createEvent(this, "fireenjinTrigger", 7);
    this.tagsToLowercase = false;
    this.disableFetch = false;
    this.name = "tags";
    this.label = undefined;
    this.placeholder = "Select Tags";
    this.value = undefined;
    this.options = [];
    this.required = false;
    this.duplicates = false;
    this.disabled = false;
    this.allowAdding = false;
    this.endpoint = undefined;
    this.resultsKey = undefined;
    this.limit = 15;
    this.orderBy = undefined;
    this.orderDirection = undefined;
    this.dataPropsMap = undefined;
    this.page = 0;
    this.results = [];
    this.fetchData = undefined;
    this.query = undefined;
    this.lines = undefined;
    this.labelPosition = "stacked";
    this.addPrompt = undefined;
    this.addIcon = "add-circle";
    this.hasValue = false;
    this.paramData = {};
  }
  async onSuccess(event) {
    var _a, _b, _c;
    if (event.detail.name === "selectTags") {
      try {
        if (this.page === 0) {
          this.results = [];
        }
        this.page = ((_c = (_b = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.results) === null || _c === void 0 ? void 0 : _c.page)
          ? event.detail.data.results.page
          : this.page + 1;
        await this.addResults(event.detail.data.results);
      }
      catch (err) {
        console.log("Error updating results!");
      }
    }
  }
  async onKeyDown(event) {
    var _a, _b;
    if (event.key === "Enter" &&
      this.allowAdding &&
      ((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) >= 1) {
      const value = this.tagsToLowercase
        ? event.target.value.toLocaleLowerCase()
        : event.target.value;
      this.addTag(value, event);
    }
  }
  async clearParamData(key) {
    if (key && this.paramData[key]) {
      const paramData = this.paramData;
      delete paramData[key];
      this.paramData = paramData;
    }
    else if (!key) {
      this.paramData = {};
    }
    return this.paramData;
  }
  async addResults(results = []) {
    this.results = [...this.results, ...results];
    this.options = this.results.map((result) => ({
      label: result.label
        ? result.label
        : result.name
          ? result.name
          : result.id
            ? result.id
            : null,
      value: result.value ? result.value : result.id ? result.id : null,
    }));
  }
  async clearResults() {
    this.page = 0;
    this.results = [];
  }
  async addTag(tag, event) {
    if (!(tag === null || tag === void 0 ? void 0 : tag.length))
      return;
    const value = this.tagsToLowercase ? tag.toLocaleLowerCase() : tag;
    if (!value.length)
      return;
    this.fireenjinTrigger.emit({
      name: "newTag",
      payload: {
        value,
      },
    });
    if (!(this.value || []).includes(value)) {
      const option = {
        label: value,
        value,
        selected: true,
      };
      this.options = [...(this.options ? this.options : []), option];
    }
    this.addValue(value, event);
    this.query = null;
    if (this.inputEl)
      this.inputEl.value = null;
  }
  async getResults(options = {}) {
    var _a, _b, _c;
    this.paramData = Object.assign(Object.assign(Object.assign({}, this.paramData), { limit: options.limit ? options.limit : this.limit, orderBy: this.orderBy, orderDirection: this.orderDirection }), ((options === null || options === void 0 ? void 0 : options.paramData) ? options.paramData : {}));
    if (options.page) {
      this.page = options.page;
    }
    if (((_a = this.query) === null || _a === void 0 ? void 0 : _a.length) > 1) {
      this.paramData.query = this.query;
    }
    if (((_b = this.results) === null || _b === void 0 ? void 0 : _b.length) && ((_c = this.results[this.results.length - 1]) === null || _c === void 0 ? void 0 : _c.id)) {
      this.paramData.next = this.results[this.results.length - 1].id;
    }
    this.fireenjinFetch.emit({
      name: "selectTags",
      endpoint: this.endpoint,
      dataPropsMap: this.dataPropsMap
        ? this.dataPropsMap
        : this.resultsKey
          ? { [this.resultsKey]: "results" }
          : null,
      disableFetch: this.disableFetch,
      params: {
        data: this.fetchData ? this.fetchData : this.paramData,
      },
    });
  }
  async addValue(value, event) {
    this.value = [...new Set([...(this.value ? this.value : []), value])];
    this.ionChange.emit({
      event,
      name: this.name,
      value: this.value,
    });
  }
  async removeValue(value, event) {
    this.value = (this.value || []).filter((val) => val !== value);
    this.ionChange.emit({
      event,
      name: this.name,
      value: this.value,
    });
  }
  async updateOptionsForValue() {
    const optionValues = (this.options || []).map((option) => option === null || option === void 0 ? void 0 : option.value);
    for (const value of this.value) {
      if (!optionValues.includes(value)) {
        this.options.push({
          label: value,
          value,
        });
      }
    }
    this.options = [...this.options];
  }
  componentDidLoad() {
    var _a;
    if (!(index.Build === null || index.Build === void 0 ? void 0 : index.Build.isBrowser))
      return;
    if (this.endpoint) {
      this.getResults();
    }
    if (!this.itemEl || !this.itemEl.shadowRoot) {
      return false;
    }
    this.itemEl.shadowRoot.querySelector(".input-wrapper").style.overflow = "visible";
    if ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) {
      this.updateOptionsForValue();
    }
  }
  render() {
    return (index.h("ion-item", { ref: (el) => (this.itemEl = el), lines: this.lines }, this.label && (index.h("ion-label", { position: this.labelPosition }, this.label)), this.allowAdding && (index.h("ion-input", { ref: (el) => (this.inputEl = el), value: this.query })), index.h("div", { class: "options-wrapper" }, index.h("fireenjin-chip-bar", null, this.allowAdding && (index.h("ion-chip", { class: "add-tag", onClick: (event) => { var _a; return this.addTag((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.value, event); } }, "Add", index.h("ion-icon", { name: this.addIcon }))), (this.options || []).map((option) => (index.h("ion-chip", { outline: !(this.value || []).includes(option === null || option === void 0 ? void 0 : option.value), onClick: (event) => (this.value || []).includes(option === null || option === void 0 ? void 0 : option.value)
        ? this.removeValue(option === null || option === void 0 ? void 0 : option.value, event)
        : this.addValue(option === null || option === void 0 ? void 0 : option.value, event) }, (option === null || option === void 0 ? void 0 : option.label) || "", (this.value || []).includes(option === null || option === void 0 ? void 0 : option.value) && (index.h("ion-icon", { name: "close-circle" }))))))), index.h("input", { style: {
        opacity: "0",
        height: "0",
        width: "0",
        float: "left",
        margin: "0",
        padding: "0",
      }, type: "text", value: this.value, required: this.required })));
  }
};
SelectTags.style = selectTagsCss;

exports.fireenjin_select_tags = SelectTags;
