<template>
  <ion-content padding>
    <h1>Modal</h1>
    <p>A Modal is a dialog that appears on top of the app's content, and must be dismissed by the app before interaction can resume. It is useful as a select component when there are a lot of options to choose from, or when filtering items in a list, as well as many other use cases. <a href="https://ionicframework.com/docs/api/modal">See full documentation.</a></p>
    <h1>Demo</h1>
    <ion-button @click="isPostComposerOpen = !isPostComposerOpen">Post Composer</ion-button>
    <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']"
      :postLanguageChanged="(lang) => {onPostLanguageChanged(lang)}"               
      v-on:composerClosed="onComposerClosed()"
      :post="{'category':{'value':'no_category','display_name':'Other','color':'#ed1556','icon':null},'user':{'uid':'1iSXkJMU39fatQcXdoQa68zRmvi1','nickname':'egylany','avatar':'https://firebasestorage.googleapis.com/v0/b/recomatetest.appspot.com/o/avatars%2F1606495846979_tenten.jpg?alt=media&token=d88181c4-84a2-440f-b938-9c1a3b8a03ce'},'image_dimensions':[{'width':560,'height':353.9273927392739}],'images':['https://firebasestorage.googleapis.com/v0/b/recomatetest.appspot.com/o/posts%2F1611757725365_blackbeer.JPG?alt=media&token=95bfa8dc-5c78-4fba-bd1f-66a4ea504a86'],'activity_date_time':null,'tags':[{'_id':'6011789e8917f9000866385e','value':'services','display_name':'Services','is_recommended':true,'matching':false}],'subject':'hello hello','description':'nice description','timestamp':1611757725363,'distance_v2':156307.99618071227,'distance':0.02450698424010099,'maxResponses':4,'numberOfReplies':0,'isGroup':false,'isInactive':false,'id':'6011789e8917f9000866385c','user_reply_status':'none','chat_type':'single','bookmarked':[], 'age':{'lower':'22', 'upper':'69'}, 'distance':{'display_name': '3 km', 'meters':'3000' , 'value':'3_km'}, 'expiration':{'display_name':'One Day', 'expires_at':'1572308755','is_expired':'false', 'seconds':'86400', 'value':'one_day'}, 'gender':{'display_name':'Female', 'value':'female'},'chat_typeObj':{'display_name':'single','value':'single'},'language':'en'}"
    />
  </ion-content>
</template>

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

export default {
  data() {
    return {
      isPostComposerOpen: false,
      categories: Categories
    }
  },
  components: {
    RecoPostComposer
  },
  methods: {
    // get and load tags on search
    getTags(input, category, keyTag, self, langShortCode) {
      console.log('lang short code ', langShortCode);
      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)
    },

    // add new tag to the database
    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);
    },
    onPostLanguageChanged(event){
      console.log('lang change: ', event);
    },
    onComposerClosed(){
      console.log('composer close event');
      this.isPostComposerOpen = false;
    }
  },
}
</script>