<template>
  <ion-content padding>
    <h1>User Search</h1>
    <p>Search for a specific username in a list. <a href="https://ionicframework.com/docs/api/modal">See full documentation.</a></p>
    <h1>Demo</h1>
    <ion-button @click="openUserSearchModal">User Search Modal</ion-button>
  </ion-content>
</template>

<script>
import RecoUserSearch from '@/components/complex/RecoUserSearch.vue';

export default {
  data() {
    return {
      RecoUserSearch: null,
      usernames: ['TimeIsMoney', 'bazelios', 'marton.takacs', 'bigeyes', 'nagyszem22']
    }
  },
  methods: {
    openUserSearchModal() {
      let comp = this;
      return this.$ionic.modalController
        .create({
          component: RecoUserSearch,
          componentProps: {
            propsData: {
              getUser: comp.getUser
            },
            methods: {
              usernameClicked(username) {
                comp.RecoUserSearch.dismiss();
                console.log(username);
              },
              backButtonClicked(userName) {
                comp.RecoUserSearch.dismiss();
              }
            }
          },
        })
        .then(m => {
          this.RecoUserSearch = m;
          this.RecoUserSearch.present();
        })
    },
    async getUser(username) {
      return this.usernames.includes(username);
    }
  }
}
</script>