<template>
  <div id="app">
    <ion-app>
      <reco-menu :menuSections="menuSections" :routeName="$route.name" v-on:recoMenuItemClicked="($event) => $router.push({name: $event})" />
      <!-- reco-post-filters 
        v-if="filters && categories && tags && categories.length && tags.length" 
        type="mainFeed"
        :filters="filters" 
        :allCategories="categories" 
        :allTags="tags"
        :getTags="getTags"
        :numOfPosts="'10'"
        menuId="recoPostFilters"
        v-on:distanceChanged="distanceChanged($event)" 
        v-on:categoryChanged="categoryChanged($event)" 
        v-on:tagsChanged="tagsChanged($event)" 
        v-on:ageChanged="ageChanged($event)" 
        v-on:genderChanged="genderChanged($event)" 
        v-on:expirationChanged="expirationChanged($event)"
      /-->

      <div class="ion-page" main>
        <reco-top-bar title="RecomponentsLibrary" />
        <router-view />
      </div>

    </ion-app>
  </div>
</template>

<script lang="ts">
import Categories from '@/dummydb/categories';
import Tags from '@/dummydb/tags';
import RecoMenu from '@/components/complex/RecoMenu.vue';
import RecoPostFilters from '@/components/complex/RecoPostFilters.vue';
import RecoTopBar from '@/components/complex/RecoTopBar.vue';

export default {
  components: {
    RecoMenu,
    RecoTopBar,
    RecoPostFilters,
  },
  data() {
    return {
      menuSections: [{
        title: "Atomic components",
        menuItems: [
          {title: 'Home', routeName: 'home', icon: 'home'},
          {title: 'Input', routeName: 'input', icon: 'create'},
          {title: 'Modal', routeName: 'modal', icon: 'expand'},
          {title: 'Placeholder', routeName: 'placeholder', icon: 'expand'},
        ],
      }, {
        title: "Complex components",
        menuItems: [
          {title: 'Posts', routeName: 'posts', icon: 'image'},
          {title: 'Post Composer', routeName: 'post_composer', icon: 'add-circle'},
          {title: 'Chat List', routeName: 'chat_list', icon: 'chatbubbles'},
          {title: 'Chat', routeName: 'chat', icon: 'chatboxes'},
          {title: 'Profile', routeName: 'profile', icon: 'person'},
          {title: 'Post Filters', routeName: 'post_filters', icon: 'options'},
          {title: 'Language Selector', routeName: 'language_selector', icon: 'globe'},
          {title: 'Document Consent', routeName: 'document_consent', icon: 'create'},
          {title: 'Confirm Credit Charge', routeName: 'confirm_credit_charge', icon: 'wallet'},
        ],
      }],
      filters: {
        distance: {value: "3 kms", display_name: "3 kms", meters: 3000},
        category: {value: "all", display_name: "All Categories", icon: "albums", color: "#535c68"},
        gender: {value: "all", display_name: "All Genders"},
        age: {lower: 21, upper: 99},
        tags: [],
        posted_at: {value: "seven_days", display_name: "7 Days", seconds: 604800},
        is_last: false,
      },
      categories: Categories,
      tags: Tags,
    };
  },
  methods: {
    onSubmitFilters(filters) {
      console.log(filters);
    },
    distanceChanged(distance) {
      console.log("New distance: ", distance);
    },
    categoryChanged(category) {
      console.log("New category: ", category);
    },
    tagsChanged(tags) {
      console.log('TAGS CHANGED!');
      console.log("New tags: ", tags);
    },
    ageChanged(age) {
      console.log("New age: ", age);
    },
    genderChanged(gender) {
      console.log("New gender: ", gender);
    },
    expirationChanged(expiration) {
      console.log("New expiration: ", expiration);
    },
    // get and load tags on search
    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)
    },
  },
}
</script>