<template>
  <div :class="{'no-scroll': showModal || showMobileNavigation}" class="app" id="app">
    <component :is="showModal" v-if="showModal"></component>
    <component :is="layout"></component>
    <mobile-navigation v-if="showMobileNavigation"></mobile-navigation>
  </div>
</template>

<script>
  import DefaultLayout from '@/layouts/DefaultLayout';
  import SimpleLayout from '@/layouts/SimpleLayout';
  import BlankLayout from '@/layouts/BlankLayout';
  import Modal from '@/components/Modal';
  import MobileNavigation from '@/components/MobileNavigation';
  import NewContentBlockWizard from '@/components/content-block-form/NewContentBlockWizard';
  import EditContentBlockWizard from '@/components/content-block-form/EditContentBlockWizard';
  import NewRoomEntryWizard from '@/components/rooms/room-entries/NewRoomEntryWizard';
  import EditRoomEntryWizard from '@/components/rooms/room-entries/EditRoomEntryWizard';
  import NewObjectiveGroupWizard from '@/components/objective-groups/NewObjectiveGroupWizard';
  import EditObjectiveGroupWizard from '@/components/objective-groups/EditObjectiveGroupWizard';
  import NewProjectEntryWizard from '@/components/portfolio/NewProjectEntryWizard';
  import EditProjectEntryWizard from '@/components/portfolio/EditProjectEntryWizard';
  import FullscreenImage from '@/components/FullscreenImage';
  import FullscreenInfographic from '@/components/FullscreenInfographic';
  import FullscreenVideo from '@/components/FullscreenVideo';

  import {mapGetters} from 'vuex';

  export default {
    name: 'App',

    components: {
      DefaultLayout,
      SimpleLayout,
      BlankLayout,
      Modal,
      MobileNavigation,
      NewContentBlockWizard,
      EditContentBlockWizard,
      NewRoomEntryWizard,
      EditRoomEntryWizard,
      NewObjectiveGroupWizard,
      EditObjectiveGroupWizard,
      NewProjectEntryWizard,
      EditProjectEntryWizard,
      FullscreenImage,
      FullscreenInfographic,
      FullscreenVideo
    },

    computed: {
      layout() {
        return (this.$route.meta.layout || 'default') + '-layout';
      },
      ...mapGetters(['showModal', 'showMobileNavigation'])
    },

    mounted() {
    }
  }
</script>

<style lang="scss">
  @import "styles/main.scss";

  body {
    overflow-y: auto;
    height: 100vh;
  }

  .app {
    /*overflow-y: auto;*/
    min-height: 100vh;
    /*for IE10+*/
    display: flex;
  }

  .no-scroll {
    overflow-y: hidden;
  }
</style>
