<template>
  <reco-modal
    v-on:backButtonClicked="backButtonClicked" 
    v-on:doneButtonClicked="doneButtonClicked" 
    :withBackButton="true" 
    :withDoneButton="false" 
    :isNextButton="false"
    :background="color"
    :title="title">

    <div v-if="isPageLoaded" class="main-container" slot="content">
      <ion-content>
        <!-- <ion-item lines="full">
          <div class="tag-list" style="display:flex; flex-wrap:wrap;">
            <reco-tag 
              v-for="(tag, index) in recommendedTags" 
              :key="'key_'+index" 
              :tag="tag" :category="category" 
              :selected="locSelected"
              @click="toggleTag(index, tag)"
              :tile-display="true"
            />            
          </div>
        </ion-item> -->
        <ion-item 
                  lines="none" v-for="(tag, index) in recommendedTags" 
                  :key="'key_'+index"
                  :tag="tag" :category="category" 
                  @click="toggleTag(index, tag)">
          <ion-label>{{tag.display_name}}</ion-label>
          <ion-checkbox 
              slot="start" 
              class="loc-tag-checkbox" 
              :checked="locSelected.find(el =>el.is_recommended) && tag.value === locSelected.find(el =>el.is_recommended).value"
              ></ion-checkbox>
        </ion-item>

        <ion-item lines="full" v-if="!excludedFeatures.includes('otherTags')">
          <div class="tag-list">
            <reco-tag 
              v-for="(tag, index) in locSelected" 
              :key="'key_'+index" v-if="!tag.is_recommended"
              :tag="tag" :category="category" 
              :selected="locSelected"
              @click="toggleTag(index, tag)"
            />
          </div>
        </ion-item>

        <ion-item  lines="full" class="item-title" v-if="!excludedFeatures.includes('otherTags')">
          Most common tags
        </ion-item>

        <ion-item lines="full" v-if="!excludedFeatures.includes('otherTags')"> 
          <div class="tag-list">
            <reco-tag 
              v-for="(tag, index) in otherTags" 
              :key="'key_'+index" 
              :tag="tag" :category="category" 
              :selected="locSelected"
              @click="toggleTag(index, tag)"
            />
          </div>
        </ion-item>

        <ion-item lines="full" v-if="!excludedFeatures.includes('otherTags')">
          <div class="search-container">
            <ion-input 
              ref="tagInput" class="loc-input" type="text" :maxlength="20"
              placeholder="Search tags ..." v-on:ionInput="onInput($event.target.value)" 
            />
          </div>
        </ion-item>

        <ion-item v-if="tagInput.length > 0 && !excludedFeatures.includes('otherTags')" lines="full" >
          <div class="tag-list">
            <reco-tag 
              v-for="(tag, index) in otherTags" 
              :key="'key_'+index" 
              :tag="tag" :category="category" 
              :selected="locSelected"
              @click="toggleTag(index, tag)"
            />
          </div>
          <div class="no-tag-found" v-if="!otherTags || otherTags.length === 0">
            No tags found
          </div>
        </ion-item>

        <!-- Number of posts -->
        <!-- <ion-item lines="none">
          <div v-if="numOfPostsLoading" class="num-of-posts" slot="end">
            <ion-spinner name="dots"></ion-spinner>
          </div>
          <div v-else class="num-of-posts" slot="end">{{ numOfPosts }} Posts</div>
        </ion-item> -->
      </ion-content>
    </div>
  </reco-modal>
</template>

<script>
import RecoModal from '@/components/complex/RecoModal.vue';
import RecoTag from '@/components/atomic/RecoTag.vue';

export default {
  name: 'RecoTagSelect',
  components: {
    RecoModal, 
    RecoTag
  },
  props: {
  	title: {
  		type: String,
  		default: "Select Tags"
  	},
    tags: {
      type: Array,
    },
    selected: {
      type: Array,
    },
    isLoading: {
      type: Boolean,
    },
    backButtonClicked: {
      type: Function,
      default: () => { return }
    },
    doneButtonClicked: {
      type: Function,
      default: () => { return }
    },
    category: {
      type: Object,
      default() {
        return {
          color: '#ED1656'
        }
      }
    },
    color: {
      type: String,
      default: '#ED1556',
    },
    excludedFeatures:{
      type: Array,
      default(){
        return [];
      }
    }
  },
  data() {
    return {
      tagInput: "",
      typingTimeOut: null,
      isPageLoaded: false,
      recommendedTags: [],
      otherTags: [],
      isFirstSearch1: true,
      isFirstSearch2: true,
      locSelected: this.selected,
      numOfPosts: '0',
      numOfPostsLoading: true,
    }
  },
  mounted() {
    setTimeout(() => {
      this.isPageLoaded = true;
    }, 100);
  },
  methods: {
    toggleTag(index, tag) {
      const isAdded = this.locSelected.find(stag => stag.value === tag.value);
      if(isAdded) {
        this.locSelected = this.locSelected.filter(stag => stag.value !== tag.value);
      } else {
        // only one key tag can be selected at a time
        if(tag.is_recommended) {
          this.locSelected = this.locSelected.filter(el => !el.is_recommended);
          setTimeout(() => {
            this.isFirstSearch1 = true;
          }, 100);
          this.isFirstSearch2 = true;
        }
        this.locSelected.push(tag);
        if(!this.isFirstSearch1 || tag.is_recommended) this.refreshTags("", tag.is_recommended ? tag.value : null);
      }
      this.onToggleTag(this.locSelected);
      this.scrollToBottom();
      console.log("SELECTED TAGS: ", this.locSelected);
    },

    onInput(input) {
      // this.isLoading = true;
      clearTimeout(this.typingTimeOut);
      this.typingTimeOut = setTimeout(() => {
        this.refreshTags(input, null);
      }, 100);
      setTimeout(() => {
        this.isFirstSearch1 = false;
      }, 100);
      this.isFirstSearch2 = false;
    },

    scrollToBottom(){
      const container = this.$el.getElementsByClassName('search-container')[0];
      if(container){
        container.scrollIntoView({behavior: 'smooth'});
      }
    },

  }
}
</script>

<style scoped lang="css">
  .item-title {
    /* padding-top: 10px; */
    font-weight: bold;
  }
  .tag-list {
    padding-top: 6px;
    padding-bottom: 14px;
  }
  .tag-list span {
    margin-bottom: 8px;
  }
  .no-tags {
    font-size: 14px;
    color: #666;
  }





  .loc-item {
    font-size: 15px;
    --border-color: rgba(0,0,0,0.2);
  }
  .loc-p {
    margin: 6px 0;
  }
  .loc-input {
    --padding-start: 8px;
    display: inline-block;
    width: 140px;
    font-size: 16px;
  }
  .main-container {
    position: fixed;
    right: 0;
    top: 44px;
    left: 0;
    bottom: 0;
  }
  .category-container {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    height: 26px;
    font-weight: 600;
    line-height: 26px;
    font-size: 14px;
    text-align: center;
    color: #fff;
  }
  .input-container {
    position: absolute;
    right: 0;
    left: 0;
    top: 26px;
    height: 100px;
    border-bottom: 0.55px solid rgba(0,0,0,0.2);
    padding: 4px;
  }
  .tag-list-container {
    position: absolute;
    right: 0;
    top: 126px;
    left: 0;
    bottom: 0;
  }
  .tag-name {
    display: inline-block;
    font-weight: 600;
  }
  .tag-activities {
    display: inline-block;
    font-size: 13px;
    margin-left: 12px;
    color: var(--reco-lighter-font-color);
  }
  .loc-title {
    font-size: 15px;
    font-weight: bold;
    --background: #f4f4f4;
    --border-color: rgba(0,0,0,0.2);
  }
  .loc-list {
    margin-bottom: 1px;
  }
  .loc-tag-checkbox{
    --border-color-checked: var(--actiways-primary-color) !important;
    --background-checked: var(--actiways-primary-color) !important;
  }
</style>