<template>
  <b-field :label-for="id">
    <template slot="label">
      {{ $t("Add some tags") }}
      <b-tooltip
        type="is-dark"
        :label="
          $t('You can add tags by hitting the Enter key or by adding a comma')
        "
      >
        <b-icon size="is-small" icon="help-circle-outline"></b-icon>
      </b-tooltip>
    </template>
    <b-taginput
      v-model="tagsStrings"
      :data="filteredTags"
      autocomplete
      :allow-new="true"
      :field="path"
      icon="label"
      maxlength="20"
      maxtags="10"
      :placeholder="$t('Eg: Stockholm, Dance, Chess…')"
      @typing="getFilteredTags"
      :id="id"
    >
    </b-taginput>
  </b-field>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import get from "lodash/get";
import differenceBy from "lodash/differenceBy";
import { ITag } from "../../types/tag.model";

@Component({
  computed: {
    tagsStrings: {
      get() {
        return this.$props.value.map((tag: ITag) => tag.title);
      },
      set(tagStrings) {
        const tagEntities = tagStrings.map((tag: string | ITag) => {
          if (typeof tag !== "string") {
            return tag;
          }
          return { title: tag, slug: tag } as ITag;
        });
        this.$emit("input", tagEntities);
      },
    },
  },
})
export default class TagInput extends Vue {
  @Prop({ required: false, default: () => [] }) data!: ITag[];

  @Prop({ required: true, default: "value" }) path!: string;

  @Prop({ required: true }) value!: ITag[];

  filteredTags: ITag[] = [];

  private static componentId = 0;

  created(): void {
    TagInput.componentId += 1;
  }

  get id(): string {
    return `tag-input-${TagInput.componentId}`;
  }

  getFilteredTags(text: string): void {
    this.filteredTags = differenceBy(this.data, this.value, "id").filter(
      (option) =>
        get(option, this.path)
          .toString()
          .toLowerCase()
          .indexOf(text.toLowerCase()) >= 0
    );
  }
}
</script>
