<template>
  <v-app>
    <v-card class="pa-4 text-center" flat>
      <v-card class="border-box-sizing d-flex flex-row justify-center ma-0" flat>
        <people-overview-card
          id="peopleInvitationsOverview"
          :title="$t('peopleOverview.label.invitations')"
          :count="invitations"
          :skeleton="skeleton"
          :class="invitations === '-' && 'text-sub-title'"
          @click="$refs.peopleDrawer.open('invitations', $t('peopleOverview.label.invitations'))" />
        <v-divider class="peopleOverviewVertivalSeparator ma-auto" vertical />
        <people-overview-card
          id="peoplePendingOverview"
          :title="$t('peopleOverview.label.pending')"
          :count="pending"
          :skeleton="skeleton"
          :class="pending === '-' && 'text-sub-title'"
          @click="$refs.peopleDrawer.open('pending', $t('peopleOverview.label.pending'))" />
      </v-card>
    </v-card>
    <people-overview-drawer ref="peopleDrawer" @refresh="refresh()" />
  </v-app>    
</template>

<script>
export default {
  data: () => ({
    invitations: '-',
    pending: '-',
    skeleton: true,
  }),
  created() {
    this.refresh();
  },
  methods: {
    refresh() {
      let loading = 2;
      this.$userService.getInvitations()
        .then(data => {
          this.invitations = data && data.size || 0;
        })
        .finally(() => {
          loading--;
          if (loading === 0) {
            this.skeleton = false;
            document.dispatchEvent(new CustomEvent('hideTopBarLoading'));
          }
        });
      this.$userService.getPending()
        .then(data => {
          this.pending = data && data.size || 0;
        })
        .finally(() => {
          loading--;
          if (loading === 0) {
            this.skeleton = false;
            document.dispatchEvent(new CustomEvent('hideTopBarLoading'));
          }
        });
    },
  },
};
</script>

