<template>
  <div class='account-encrypted'>
    Le compte est pour l'instant chiffré, la clé sera récupérée dès qu'une
    connexion internet est établie.
    <button class="button is-link is-rounded is-loading" v-if="fetching"></button>
    <online-view @online="fetchKey" />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { Getter } from 'vuex-class'
import axios from 'axios'
import { GET_KEY_URL } from '@/utils/serverless-url'
import bus, { SYNC } from '@/utils/bus-event'
import IUser from '@/models/IUser'
import couchService from '@/services/CouchService'
import notif from '@/utils/notif'

@Component({
  components: {
    'online-view': () => import('@/components/OnlineView.vue')
  }
})
export default class AccountEncrypted extends Vue {
  @Getter
  public user!: IUser
  @Prop({ type: String, required: true })
  public id!: string
  public fetching: boolean = false

  public async fetchKey(): Promise<void> {
    if (!this.user) {
      return
    }
    this.fetching = true
    const retrieved: boolean = await couchService.retrievePassword(this.id || '', this.user)
    if (retrieved) {
      bus.$emit(SYNC, [this.id])
    } else {
      notif.alert(`
        Impossible de récupérer la clé,
        veuillez réessayer plus tard...
      `)
    }
    this.fetching = false
  }
}
</script>
