<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 {mapGetters} from 'vuex';
  import ScrollUp from '@/components/ScrollUp';
  import ReadOnlyBanner from '@/components/ReadOnlyBanner';

  const Modal = () => import(/* webpackChunkName: "modals" */'@/components/Modal');
  const FullscreenImage = () => import(/* webpackChunkName: "modals" */'@/components/FullscreenImage');
  const FullscreenInfographic = () => import(/* webpackChunkName: "modals" */'@/components/FullscreenInfographic');
  const FullscreenVideo = () => import(/* webpackChunkName: "modals" */'@/components/FullscreenVideo');
  const DeactivatePerson = () => import(/* webpackChunkName: "modals" */'@/components/profile/DeactivatePerson');
  const SnapshotCreated = () => import(/* webpackChunkName: "modals" */'@/components/modules/SnapshotCreated');
  const ChangeVisibility = () => import(/* webpackChunkName: "modals" */'@/components/rooms/ChangeVisibility');
  const NewContentBlockWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/content-block-form/NewContentBlockWizard');
  const EditContentBlockWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/content-block-form/EditContentBlockWizard');
  const NewRoomEntryWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/rooms/room-entries/NewRoomEntryWizard');
  const EditRoomEntryWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/rooms/room-entries/EditRoomEntryWizard');
  const NewProjectEntryWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/portfolio/NewProjectEntryWizard');
  const EditProjectEntryWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/portfolio/EditProjectEntryWizard');
  const NewObjectiveWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/objective-groups/NewObjectiveWizard');
  const NewNoteWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/notes/NewNoteWizard');
  const EditNoteWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/notes/EditNoteWizard');
  const EditClassNameWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/school-class/EditClassNameWizard');
  const EditTeamNameWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/profile/EditTeamNameWizard');
  const DefaultLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/DefaultLayout');
  const SimpleLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/SimpleLayout');
  const FullScreenLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/FullScreenLayout');
  const PublicLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/PublicLayout');
  const BlankLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/BlankLayout');
  const SplitLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/SplitLayout');

  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";
  @import "~styles/helpers";

  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>
