<template>
  <div class="app" v-if="!loading">
    <app-login v-if="!authenticated" />
    <template v-else>
      <app-navigation />
      <div class="app-main">
        <router-view></router-view>
      </div>
      <app-overlays />
      <app-notifications />
    </template>
  </div>
  <div class="app-loading" v-else>
    <ui-loading />
  </div>
</template>


<script lang="ts">
  import './styles/styles';
  import AppLogin from './account/login.vue';
  import AppNavigation from './ui/app-navigation.vue';
  import AppNotifications from './ui/app-notifications.vue';
  import AppOverlays from './ui/app-overlays.vue';
  import { defineComponent } from 'vue';
  import startup from './startup';
  import { AccountUser } from 'zero/account';

  export default defineComponent({
    name: 'app',

    components: { AppLogin, AppNavigation, AppNotifications, AppOverlays },

    data: () => ({
      loading: true,
      authenticated: false
    }),

    mounted()
    {
      this.startup();

      this.zero.events.on('zero.authenticate', this.onAuthentication);
    },


    methods: {

      async startup()
      {
        const result = await startup(this.zero);
        this.authenticated = result.authenticated;
        this.loading = false;
      },


      async onAuthentication(user?: AccountUser)
      {
        await this.startup();
      }

    }
  });

</script>

<style lang="scss">
  .app-loading
  {
    display: flex;
    height: 100vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
  }
</style>