<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';

import modals from '@/components/modals';

const NewContentBlockWizard = () =>
  import(/* webpackChunkName: "content-forms" */ '@/components/content-block-form/NewContentBlockWizard');
const EditContentBlockWizard = () =>
  import(/* webpackChunkName: "content-forms" */ '@/components/content-block-form/EditContentBlockWizard');
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 EditSnapshotTitleWizard = () =>
  import(/* webpackChunkName: "content-forms" */ '@/components/snapshots/EditSnapshotTitleWizard');
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,
    NewContentBlockWizard,
    EditContentBlockWizard,
    EditRoomEntryWizard,
    NewProjectEntryWizard,
    EditProjectEntryWizard,
    NewObjectiveWizard,
    NewNoteWizard,
    EditNoteWizard,
    EditClassNameWizard,
    EditTeamNameWizard,
    EditSnapshotTitleWizard,
    ...modals,
  },

  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>
