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

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

export default (self, animations, callbacks) => {
	return self.$ionic.modalController.create({
    component: RecoTagFilterSelect,
    enterAnimation: animations.enterAnimation,
    leaveAnimation: animations.leaveAnimation,
    componentProps: {
      propsData: {
        title: 'Select a Topic',
        tags: [],
        selected: self.tags,
        category: self.category,
        color: self.color,
        isLoading: false,
        backButtonClicked: callbacks.backButtonClicked ? callbacks.backButtonClicked : () => { return },
        excludedFeatures: self.excludedFeatures
      },
      created() {
        self.getTags("", self.category, null, this);
        setTimeout(() => {
          this.numOfPosts = self.numOfPosts;
          this.numOfPostsLoading = false;
        }, 2000);
      },
      methods: {
        onToggleTag(tags) {
          self.tags = tags;
          this.onSelectedTagsUpdate();
          self.tagsChanged(self.tags);
          this.numOfPostsLoading = true;
          setTimeout(() => {
            this.numOfPosts = self.numOfPosts;
            this.numOfPostsLoading = false;
          }, 2000);
        },
        refreshTags(input, keyTag) {
          this.tagInput = input;
          self.getTags(input, self.category, keyTag, this);
        },
        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();
  })
}