<template>
  <reco-lazy-loading-list :isAllLoaded="isAllLoaded" v-on:loadNextPage="loadNextPage($event)">
    <div v-for="post in posts" :key="post.id">
      <ion-item-divider class="loc-divider"></ion-item-divider>
    	<reco-post 
        :excludedFeatures="['follow', 'border']"
        :recoDate="false"
        :post="post" :me="{uid: 1, bookmarked: []}" :following="[{uid: 3}, {uid: 5}]"
        v-on:toggleTag="toggleTag($event)" v-on:deletePost="deletePost($event)" 
        v-on:reported="onReported($event)" 
        v-on:bookmarkToggle="onBookmarkToggle($event)"
        v-on:editButtonClicked="onEditButtonClick($event)"/>
    </div>
    <ion-item-divider class="loc-divider"></ion-item-divider>
    <reco-post-composer
        v-if="isPostComposerOpen"
        title="Create Activity"
        :categories="categories"
        :root="this"
        :me="{ uid: 123, nickname: 'testuser', avatar: 'http://lorempixel.com/200/200/people/', location: { lat: 1.0, long: 2.0 }, gender: 'male', age: 25,birthday: '12/03/2000', languages: { post_language: 'hu', spoken_languages: ['hu', 'ru', 'en'] } }"
        :getTags="getTags"
        :addNewTag="addNewTag"
        :submitPost="submitPost"
        :excludedFeatures_="['group-response', 'infinite-distance', 'infinite-expiration', 'theme']"
        color="#3d99ce"
        :excludedFeatures="['otherTags']"
        :activeFeatures="['forum', 'forum100', 'forum1000', 'forum10000', 'forum_unlimited']"
        :post="postToEdit"
      />
  </reco-lazy-loading-list>
</template>

<script>
import RecoPost from '@/components/complex/RecoPost.vue'
import RecoLazyLoadingList from '@/components/complex/RecoLazyLoadingList.vue'
import Posts from '@/dummydb/posts'
import RecoPostComposer from '@/components/complex/RecoPostComposer.vue'
import Categories from '@/dummydb/categories'
import Tags from '@/dummydb/tags'


export default {
  components: {
    RecoPost,
    RecoLazyLoadingList,
    RecoPostComposer
  },
  data() {
    return {
      posts: Posts.slice(0, 3),
      isAllLoaded: false,
      isPostComposerOpen: false,
      postToEdit: null,
      categories: Categories
    };
  },
  methods: {
    loadNextPage(e) {
      for (var i = e.start; i < e.end; i++) {
        if (i < Posts.length) {
          this.posts.push(Posts[i]);
        } else {
          this.isAllLoaded = true;
        }
      }
    },
    toggleTag(tag) {
      console.log(tag);
    },
    deletePost(post) {
      console.log(post);
    },
    onReported(details) {
      console.log('Reported: ', details);
    },
    onBookmarkToggle(post){
      console.log('onBookmarkToggle ', post);
      const uid = 1;
      if(post.bookmarked.includes(uid)){
        post.bookmarked = post.bookmarked.filter(id => id !== uid);
      }
      else{
        post.bookmarked.push(uid);
      }
    },
    onEditButtonClick(post){
      this.isPostComposerOpen = true;
      this.postToEdit = post;
    },
    getTags(input, category, keyTag, self) {
      setTimeout(() => {
        self.recommendedTags = JSON.parse(JSON.stringify(Tags))
                    .filter(tag => tag.is_recommended)
                    .sort((a, b) => (a.activities < b.activities) ? 1 : -1);
        if (input.length) {
          self.otherTags = JSON.parse(JSON.stringify(Tags.filter(tag => { 
            return tag.display_name.toLowerCase().includes(input.toLowerCase()) && !tag.is_recommended; 
          }))).sort((a, b) => (a.activities < b.activities) ? 1 : -1);
          // self.isLoading = false;
          return;
        }
        self.otherTags = JSON.parse(JSON.stringify(Tags))
                    .filter(tag => !tag.is_recommended)
                    .sort((a, b) => (a.activities < b.activities) ? 1 : -1)
                    .slice(0,10);
        // self.isLoading = false;
        return;
        }, 100)
    },
    addNewTag(input, category) {
      const tag = {
        value: this.getTagValue(input), 
        display_name: input.replace(/\s\s+/g, ' ').trim(), 
        categories: [category], 
        languages: ["en","hu"], 
        is_recommended: false,
        activities: 0
      };
      if(Tags.findIndex(locTag => locTag.value === tag.value) == -1) {
        Tags.push(tag);
      }
      return tag;
    },

    // submit post
    submitPost(post) {
      console.log(post);
    },
  },
}
</script>

<style scoped lang="css">
  .loc-divider {
    line-height: 2px !important;
    padding: 0px;
    min-height: 2px;
    margin: 8px 0;
    background-color: #c2c2c2;
  }
</style>