<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="openPostFilters()">Post Filters</ion-button>
    <ion-button @click="openForumPostFilters()">Forum Post Filters</ion-button>
  </ion-content>
</template>

<script>
import RecoPostFilters from '@/components/complex/RecoPostFilters.vue';
import RecoForumPostFilters from '@/components/complex/RecoForumPostFilters.vue';
import Tags from '@/dummydb/tags';

export default {
  data() {
    return {
      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: 18, upper: 99},
        tags: [],
        posted_at: {value: "seven_days", display_name: "7 Days", seconds: 604800},
        is_last: false,
      },
      numOfPosts: '10',
      tags: Tags,
      recoPostFiltersModal: null,
    }
  },
  methods: {
    openPostFilters() {
      const self = this;
      return self.$ionic.modalController.create({
        component: RecoPostFilters,
        componentProps: {
          propsData: {
            filters: self.filters,
            allTags: self.tags,
            getTags: self.getTags,
            numOfPosts: self.numOfPosts,
            color: '#3d99ce',
            excludedFeatures: ['otherTags'],
            recoDate: false,
            businessOnlySelected: () => {console.log('business only selected')}
          },
          methods: {
            clearFiltersClicked() {
              console.log('Clear Filters Clicked');
              self.recoPostFiltersModal.dismiss();
            },
            distanceChanged(distance) {
              console.log('Distance Changed', distance);
            },
            tagsChanged(tags) {
              console.log('Tags Changed', tags);
            },
            ageChanged(age) {
              console.log('Age Changed', age);
            },
            genderChanged(gender) {
              console.log('Gender Changed', gender);
            },
            expirationChanged(expiration) {
              console.log('Espiration Changed', expiration);
            },
            backButtonClicked() {
              self.recoPostFiltersModal.dismiss();
            }
          }
        },
      })
      .then(m => {
        self.recoPostFiltersModal = m;
        self.recoPostFiltersModal.present();
      })
    },
    openForumPostFilters() {
      const self = this;
      return self.$ionic.modalController.create({
        component: RecoForumPostFilters,
        componentProps: {
          propsData: {
            filters: self.filters,
          },
          methods: {
            clearFiltersClicked() {
              console.log('Clear Filters Clicked');
              self.recoPostFiltersModal.dismiss();
            },
            distanceChanged(distance) {
              console.log('Distance Changed', distance);
            },
            ageChanged(age) {
              console.log('Age Changed', age);
            },
            genderChanged(gender) {
              console.log('Gender Changed', gender);
            },
            expirationChanged(expiration) {
              console.log('Espiration Changed', expiration);
            },
            backButtonClicked() {              
              self.recoPostFiltersModal.dismiss();
            }
          }
        },
      })
      .then(m => {
        self.recoPostFiltersModal = m;
        self.recoPostFiltersModal.present();
      })
    },
    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>