<template>
  <div id="app">
    <GeorchestraHeader
      v-if="isGeorchestra"
      :key="$route.fullPath"
    />
    <AppHeader v-else />


    <div id="app-content">
      <span id="scroll-top-anchor" />
      <div
        :class="{ active: loader.isLoading }"
        class="ui inverted dimmer"
      >
        <div class="ui text loader">
          {{ loader.message }}
        </div>
      </div>

      <!-- //* Les views sont injectées ici -->
      <router-view class="page-content" />
    </div>

    <AppFooter />
  </div>
</template>

<script>
import { mapState } from 'vuex';

import AppHeader from '@/components/AppHeader';
import AppFooter from '@/components/AppFooter';
import GeorchestraHeader from '@/components/GeorchestraHeader.vue';

export default {
  name: 'App',

  components: {
    GeorchestraHeader,
    AppHeader,
    AppFooter,
  },

  data() {
    return {
      menuIsOpen: false,
      rightMenuIsOpen: true,
      baseUrl: this.$store.state.configuration.BASE_URL,
      width: window.innerWidth > 0 ? window.innerWidth : screen.width,
    };
  },

  computed: {
    ...mapState([
      'user',
      'USER_LEVEL_PROJECTS',
      'configuration',
      'loader',
    ]),
    ...mapState('projects', [
      'projects',
      'project',
    ]),
    isGeorchestra() {
      return this.configuration.GEORCHESTRA_INTEGRATION?.HEADER;
    },
  },
};
</script>

<style scoped>
.ui.active.dimmer {
  position: fixed;
}
</style>