import RecoTagSelect from '@/components/atomic/RecoTagSelect.vue';

/*
* Builds category select modal
* -----------------------------------------------------------
* self object needs to contain the following reactive keys:
*  - tags
*  - category
*  - isInitialSteps
*  - getTags()
*  - tagSelectModal
*/

export default (self, animations, callbacks, excludedFeatures,isOnlySelect, tags, language) => {
	return self.$ionic.modalController.create({
    component: RecoTagSelect,
    enterAnimation: animations.enterAnimation,
    leaveAnimation: animations.leaveAnimation,
    componentProps: {
      propsData: {
        title: 'Select a Topic',
        tags: [],
        selected: tags ? tags : self.tags,
        category: self.category,
        isLoading: false,
        isInitialSteps: isOnlySelect ? false : self.isInitialSteps,
        isOnlySelect: isOnlySelect,
        backButtonClicked: callbacks.backButtonClicked ? callbacks.backButtonClicked : () => { return },
        doneButtonClicked: callbacks.doneButtonClicked ? callbacks.doneButtonClicked : () => { return },
        isNextButton: self.isNextButton,
        color: self.color,
        withBackButton: callbacks.backButtonClicked ? true : false,
        withDoneButton: callbacks.doneButtonClicked ? true : false,
        excludedFeatures: excludedFeatures
      },
      created() {
        self.getTags("", self.category, null, this, language);
      },
      methods: {
        onToggleTag(tags) {
          self.tags = tags;
          this.onSelectedTagsUpdate();
        },
        refreshTags(input, keyTag) {
          this.tagInput = input;
          self.getTags(input, self.category, keyTag, this, language);
        },
        onAddNewTag(input) {
          if (!isOnlySelect) {
            const tag = self.addNewTag(input, self.category, self.tags.filter(t => t.is_recommended), this);
            self.tags.push(tag);
            this.refreshTags("");
            this.onSelectedTagsUpdate();
          }
        },
        onSelectedTagsUpdate() {
          this.selected = self.tags;
          if (this.$refs.tagInput) {
            this.$refs.tagInput.value = "";
            //this.$refs.tagInput.setFocus();
          }
          // setTimeout(() => this.$refs.selectedTagsContainer.scrollToBottom(), 100);
        }
      },
    },
  })
  .then(m => {
    self.tagSelectModal = m;
    self.tagSelectModal.present();
  })
}