<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="openProfileModal">Open Profile Modal</ion-button>
  </ion-content>
</template>

<script>
import Posts from '@/dummydb/posts';
import RecoProfileModal from '@/components/complex/RecoProfileModal.vue'

export default {
  data() {
    return {
      profileModal: null,
    };
  },
  methods: {
    openProfileModal() {
      let comp = this;
      return this.$ionic.modalController
        .create({
          component: RecoProfileModal,
          componentProps: {
            created() {
              comp.setUserProfile(this); 
            },
            propsData: {
              recoDate: true
            },
            methods: {
              backButtonClicked() {
                comp.profileModal.dismiss();
              },
              toggleFollow() {
                console.log("Follow toggled.");
              },
              editProfileButtonClicked() {
                console.log("Edit button clicked.");
              },
              onEditButtonClick(post){
                console.log('edit post click ', post);
              },
              onBookmarkToggle: () =>{console.log('bookmark toggle')},
              onReportUser: event => {comp.onUserReport(event)},
              toggleBlockUser: event => { comp.onToggleBlockUser(event)},
              onProfileChatNowClicked: event => { console.log('profile chat now clicked', event)}
            }
          },
        })
        .then(m => {
          this.profileModal = m;
          this.profileModal.present();
        })
    },
    setUserProfile(comp) {
      comp.name = "Ana Belciug";
      comp.username = "anamaria";
      comp.avatar = "https://homepages.cae.wisc.edu/~ece533/images/zelda.png";
      comp.bio = "Lorem ipsum dolor sit amet, consec adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...",
      comp.userAchievements = { silver: 3, bronze: 16 };
      comp.isFollowed = false;
      comp.isMe = false;
      comp.isNameVisible = false;
      comp.posts = Posts;
      comp.me = {uid: 1, bookmarked: [], blockedUsers: []};
      comp.height = 173;
      comp.weight = 68;
      comp.numOfChildren = 10;
      comp.smoker = true;
      comp.pets = {cat: false, dog: true, other: false};
      comp.occupation = "csinálok ezt-azt";
      comp.gallery = ['https://homepages.cae.wisc.edu/~ece533/images/airplane.png', 'https://homepages.cae.wisc.edu/~ece533/images/peppers.png'];
      comp.galleryDate = ['https://homepages.cae.wisc.edu/~ece533/images/peppers.png'];
      comp.uid = 69,
      comp.galleryImgs = [];
      comp.isBusiness = false;
			
			if(comp.avatar){
				comp.galleryImgs.push(comp.avatar);
			}
			if(comp.galleryDate && comp.galleryDate.length > 0){
				comp.galleryImgs.push(...comp.galleryDate);
			}
    },
    onUserReport(event){
      console.log('user report ', event.uid, event.reason);
    },
    onToggleBlockUser(event){
      console.log('toggle user block ', event);
    }
  },
}
</script>