<template>
  <div
    :class="{'no-scroll': showModal || showMobileNavigation}"
    class="app"
    id="app">
    <read-only-banner/>
    <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 SplitLayout from '@/layouts/SplitLayout';
  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 ChangeVisibility from '@/components/rooms/ChangeVisibility';
  import {mapGetters} from 'vuex';
  import ScrollUp from '@/components/ScrollUp';
  import ReadOnlyBanner from '@/components/ReadOnlyBanner';

  export default {
    name: 'App',

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

    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;
    flex-direction: column;
  }

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

</style>
