<template>
  <v-autocomplete
    dense
    :value="value"
    :readonly="readonly"
    :items="sourcetags"
    :loading="tagSearchUnderway"
    :placeholder="placeHolderText"
    :persistent-placeholder="persistentPlaceHolder"
    :hint="hint"
    :label="noLabel ? '' : title"
    :prepend-inner-icon="prependInnerIcon"
    :no-data-text="$ay.t('NoData')"
    :search-input.sync="tagSearchEntry"
    :clearable="clearable"
    hide-selected
    multiple
    chips
    small-chips
    deletable-chips
    cache-items
    :rules="rules"
    :error-messages="errorMessages"
    @input="input($event)"
  >
    <template v-if="offerAdd()" slot="no-data">
      <v-chip color="primary" text-color="white" class="text-h4">
        {{ normalizeTag(tagSearchEntry) }}</v-chip
      >
      <v-btn large icon @click="addTag()">
        <v-icon large color="success">$ayiPlusCircle</v-icon>
      </v-btn>
    </template>
  </v-autocomplete>
</template>
<script>
export default {
  props: {
    value: {
      default() {
        return [];
      },
      type: Array
    },
    label: {
      type: String,
      default() {
        return null;
      }
    },
    readonly: { type: Boolean, default: false },
    rules: { type: Array, default: undefined },
    errorMessages: { type: Array, default: null },
    selectOnly: { type: Boolean, default: false },
    noLabel: { type: Boolean, default: false },
    clearable: { type: Boolean, default: false },
    placeHolder: {
      type: String,
      default: null
    },
    persistentPlaceHolder: { type: Boolean, default: false },
    hint: {
      type: String,
      default: null
    },
    prependInnerIcon: {
      type: String,
      default() {
        return null;
      }
    }
  },
  data() {
    return {
      sourcetags: [],
      tagSearchEntry: null,
      tagSearchUnderway: false,
      initialized: false
    };
  },
  computed: {
    title() {
      if (this.label) {
        return this.label;
      }
      return this.$ay.t("Tags");
    },
    placeHolderText() {
      if (this.placeHolder) {
        return this.placeHolder;
      }
      return this.$ay.t("TypeToSearchOrAdd");
    }
  },
  watch: {
    async tagSearchEntry(val) {
      if (!val || this.tagSearchUnderway) {
        return;
      }
      this.tagSearchUnderway = true;
      try {
        const res = await window.$gz.api.get("tag-list/list?query=" + val);
        //We never expect there to be no data here
        if (!Object.prototype.hasOwnProperty.call(res, "data")) {
          throw new Error(res);
        }
        //adding this to the property will automatically have it cached by the autocomplete component
        //as cache-items has been set so this just needs to be set here once and all is well in future
        //Any search will be kept for later so this is very efficient
        this.sourcetags = res.data;
        this.tagSearchUnderway = false;
      } catch (err) {
        window.$gz.errorHandler.handleFormError(err);
      }
    }
  },
  created() {
    //Set the initial list items based on the record items, this only needs to be called once at init
    if (!this.initialized && this.value != null && this.value.length > 0) {
      this.sourcetags = this.value;
      this.initialized = true;
    }
  },
  methods: {
    offerAdd() {
      if (
        this.selectOnly ||
        this.tagSearchEntry == null ||
        this.tagSearchEntry == ""
      ) {
        return false;
      }
      const searchTag = this.normalizeTag(this.tagSearchEntry);
      if (this.value.some(z => z == searchTag)) return false;
      return true;
    },
    input(e) {
      this.tagSearchEntry = "";
      this.$emit("input", e);
    },
    addTag() {
      let theTag = this.tagSearchEntry;
      theTag = this.normalizeTag(theTag);
      this.sourcetags.push(theTag);
      this.value.push(theTag);
      this.tagSearchEntry = "";
      this.$emit("input", this.value);
    },
    normalizeTag(tagName) {
      return window.$gz.util.normalizeTag(tagName);
    }
  }
};
</script>
