<template>
  <reco-modal 
    v-on:backButtonClicked="backButtonClicked" 
    v-on:doneButtonClicked="doneButtonClicked" 
    :withBackButton="withBackButton ? (locSelected.length < 1 ? isInitialSteps : true) : false" 
    :withDoneButton="false"
    :isNextButton="false"
    :title="title">
    <!-- :isNextButton="!withBackButton || locSelected.length >= 1" -->

    <div v-if="isPageLoaded" class="main-container" slot="content">
      <ion-content style="padding-top: 3px">
        <!-- div class="category-container" :style="'background-color: '+category.color">{{category.display_name}}</div -->

        <!-- div class="input-container">
          <ion-content ref="selectedTagsContainer">
            <ion-chip v-for="tag in selected" :key="tag.value" class="loc-chip-default" outline>
              <ion-label>{{tag.display_name}}</ion-label>
              <ion-icon name="close" @click="onToggleTag(tag)"></ion-icon>
            </ion-chip>
            <ion-input 
              ref="tagInput" class="loc-input" type="text" :maxlength="20" :autofocus="true"
              placeholder="Awesome tag ..." v-on:ionInput="onInput($event.target.value)" 
            />
          </ion-content>
        </div -->

        <!--<ion-item lines="full" class="item-title">
          Select a topic ...
        </ion-item>-->

        <button :class="locSelected.length < 1 ? 'loc-next-btn disabled' : 'loc-next-btn'" 
               @click="doneButtonClicked"
               :disabled="locSelected.length < 1">
                  Next <b-icon class="loc-next-icon" icon="chevron-right" />
        </button>  

        <ion-item v-show="areKeyTagsShown" lines="none" v-for="(tag, index) in recommendedTags" :key="tag.value" @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 v-if="!areKeyTagsShown" lines="full" @click="areKeyTagsShown = true">
          <ion-label :style="{ color }">{{locSelected.find(el => el.is_recommended).display_name}}</ion-label>
          <span class="icon-edit loc-icon" :style="{ color }" slot="end"></span>
        </ion-item>

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

        <ion-item v-if="otherTags.length > 0 && locSelected.find(t =>t.is_recommended) && isFirstSearch1 && !areKeyTagsShown" lines="full" class="item-title">
          Most common tags
        </ion-item>

        <ion-item v-if="otherTags.length > 0 && locSelected.find(t =>t.is_recommended) && isFirstSearch2 && !areKeyTagsShown" 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>
        </ion-item>

        <ion-item v-if="locSelected.filter(t =>t.is_recommended).length > 0 && !areKeyTagsShown" lines="full">
          <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="locSelected.filter(t =>t.is_recommended).length > 0 && tagInput.length > 0 && !areKeyTagsShown" 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)"
            />
            <reco-tag 
              v-if="!otherTags.length && !isOnlySelect" 
              :tag="{ display_name: tagInput, value: tagInput }" :category="category" 
              :selected="locSelected"
              @click="onAddNewTag(tagInput)"
            />
          </div>
        </ion-item>



        <!--div class="tag-list-container">
          <ion-content>

            <ion-list class="loc-list" v-if="recommendedTags.length" lines="full">
              <ion-item class="loc-title">Recommended Tags</ion-item>
              <ion-item class="loc-item" v-for="tag in recommendedTags" :key="tag.value" @click="onToggleTag(tag)">
                <p class="loc-p"><span class="tag-name">{{ tag.display_name }}</span>
                <span class="tag-activities">{{ tag.activities }} activities</span></p>
                <ion-icon v-if="isTagSelected(tag)" name="checkmark" slot="end" color="primary"></ion-icon>
              </ion-item>
            </ion-list>

            <ion-list v-if="otherTags.length" lines="full">
              <ion-item class="loc-title">All Tags</ion-item>
              <ion-item class="loc-item" v-for="tag in otherTags" :key="tag.value" @click="onToggleTag(tag)">
                <p class="loc-p"><span class="tag-name">{{ tag.display_name }}</span>
                <span class="tag-activities">{{ tag.activities }} activities</span></p>
                <ion-icon v-if="isTagSelected(tag)" name="checkmark" slot="end" color="primary"></ion-icon>
              </ion-item>
              <ion-item v-if="!isOnlySelect && tagInput && otherTags.length == 0" class="loc-item" @click="onAddNewTag(tagInput)">
                <p class="loc-p"><span class="tag-name">{{ tagInput }}</span>
                <span class="tag-activities">0 activities</span></p>
              </ion-item>
            </ion-list>

        </ion-content>
        </div -->
      </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 }
    },
    withBackButton: {
      type: Boolean,
      default: true,
    },
    withDoneButton: {
      type: Boolean,
      default: true,
    },
    isInitialSteps: {
      type: Boolean,
      default: true,
    },
    isOnlySelect: {
      type: Boolean,
      default: false,
    },
    category: {
      type: Object
    },
    isNextButton: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: '#ED1556',
    },
    excludedFeatures:{
      type: Array,
      default(){
        return [];
      }
    }
  },
  data() {
    console.log('selected tag: ', this.selected);
    return {
      tagInput: "",
      typingTimeOut: null,
      isPageLoaded: false,
      recommendedTags: [],
      otherTags: [],
      isFirstSearch1: true,
      isFirstSearch2: true,
      locSelected: this.selected,
      areKeyTagsShown: 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);
        if(tag.is_recommended) {
          this.areKeyTagsShown = true;
        }
      } 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.areKeyTagsShown = false;         
        }
        this.locSelected.push(tag);
        if(!this.isFirstSearch1 || tag.is_recommended) this.refreshTags("", tag.is_recommended ? tag.value : null);
      }
      this.onToggleTag(this.locSelected);
      console.log("SELECTED TAGS: ", this.locSelected);
      
      if(!this.areKeyTagsShown && this.excludedFeatures.includes('otherTags')){
        this.doneButtonClicked();
      }
    },
    onInput(input) {
      // this.isLoading = true;
      clearTimeout(this.typingTimeOut);
      this.typingTimeOut = setTimeout(() => {
        this.refreshTags(input, null);
      }, 100);
      setTimeout(() => {
        this.isFirstSearch1 = false;
      }, 100);
      this.isFirstSearch2 = false;
    },
  }
}
</script>

<style scoped lang="css">
  .item-title {
    font-size:15px;
  }
  .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;
  }
  ion-label {
    font-weight: 500;
    font-size: 14px;
    padding: 3px 0;
  }
  .loc-tag-checkbox{
    --border-color-checked: var(--actiways-primary-color) !important;
    --background-checked: var(--actiways-primary-color) !important;
  }
    .loc-next-btn{
    position: fixed;
    right: 8px;
    bottom: 9px;
    max-width: 140px;
    max-height: 42px;
    line-height: 36px;
    font-weight: bold;
    font-size: 16px;
    border-radius: 10px;
    text-align: center;
    background: var(--actiways-primary-color); 
    color: #fff;
    z-index: 999;
    padding-left: 10px;
  }
  .loc-next-icon{
    position: relative;
    top: 2px;
  }
  .disabled{
    background: #f58ead;
  }
</style>