<template>
  <reco-modal 
    v-on:backButtonClicked="backButtonClicked" 
    :withBackButton="true" 
    :withDoneButton="false"  
    :isNextButton="false" 
    :title="title">

    <ion-content slot="content">
      <ion-searchbar @ionInput="input => username = input.target.value"></ion-searchbar>
      <ion-item v-if="result" class="loc-item" lines="none">
        <ion-label @click="usernameClicked(username)">
          <h2>{{ result.nickname }}</h2>
          <p>Click here to see profile</p>
        </ion-label>
      </ion-item>
      <ion-item v-else class="loc-item" lines="none">
        <div class="no-result-box" v-if="username">
          Username <strong>{{username}}</strong> could not be found.
        </div>
        <div class="no-result-box" v-else>
          Please type a username to find user's profile. 
        </div>
      </ion-item>
    </ion-content>

  </reco-modal>
</template>

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

export default {
  name: 'RecoUserSearch',
  components: {
    RecoModal
  },
  props: {
    title: {
      type: String,
      default: "Search Username"
    },
    getUser: {
      type: Function
    },
  },
  data() {
    return {
      username: '',
      result: null
    } 
  },
  watch: {
    async username() {
      const userResult = await this.getUser(this.username);
      if (userResult) {
        this.result = userResult;
      } else {
        this.result = null;
      }
    }
  },
}
</script>

<style scoped lang="css">
  .loc-item {
    margin: 5px 0;
  }
</style>