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

<script>
  import DefaultLayout from '@/layouts/DefaultLayout';
  import SimpleLayout from '@/layouts/SimpleLayout';
  import FullScreenLayout from '@/layouts/FullScreenLayout';
  import PublicLayout from '@/layouts/PublicLayout';
  import BlankLayout from '@/layouts/BlankLayout';
  import Modal from '@/components/Modal';
  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 NewProjectEntryWizard from '@/components/portfolio/NewProjectEntryWizard';
  import EditProjectEntryWizard from '@/components/portfolio/EditProjectEntryWizard';
  import NewObjectiveWizard from '@/components/objective-groups/NewObjectiveWizard';
  import NewNoteWizard from '@/components/notes/NewNoteWizard';
  import EditNoteWizard from '@/components/notes/EditNoteWizard';
  import EditClassNameWizard from '@/components/school-class/EditClassNameWizard';
  import EditTeamNameWizard from '@/components/profile/EditTeamNameWizard';
  import FullscreenImage from '@/components/FullscreenImage';
  import FullscreenInfographic from '@/components/FullscreenInfographic';
  import FullscreenVideo from '@/components/FullscreenVideo';
  import DeactivatePerson from '@/components/profile/DeactivatePerson';
  import SnapshotCreated from '@/components/modules/SnapshotCreated';
  import {mapGetters} from 'vuex';
  import ScrollUp from '@/components/ScrollUp';

  export default {
    name: 'App',

    components: {
      ScrollUp,
      DefaultLayout,
      SimpleLayout,
      FullScreenLayout,
      PublicLayout,
      BlankLayout,
      Modal,
      NewContentBlockWizard,
      EditContentBlockWizard,
      NewRoomEntryWizard,
      EditRoomEntryWizard,
      NewProjectEntryWizard,
      EditProjectEntryWizard,
      NewObjectiveWizard,
      NewNoteWizard,
      EditNoteWizard,
      EditClassNameWizard,
      EditTeamNameWizard,
      FullscreenImage,
      FullscreenInfographic,
      FullscreenVideo,
      DeactivatePerson,
      SnapshotCreated
    },

    computed: {
      layout() {
        return (this.$route.meta.layout || 'default') + '-layout';
      },
      ...mapGetters({
        showModalDeprecated: 'showModal', // don't use this any more todo: remove this
        showMobileNavigation: 'showMobileNavigation'
      }),
      showModal() {
        return this.$modal.state.component;
      }
    },
  };
</script>

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

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

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

  .no-scroll {
    overflow-y: hidden;
  }

</style>
