<template>
  <div :class="{'no-scroll': showModal}">
    <component :is="showModal" v-if="showModal"></component>
    <component :is="layout"></component>
  </div>
</template>

<script>
  import DefaultLayout from '@/layouts/DefaultLayout';
  import SimpleLayout from '@/layouts/SimpleLayout';
  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 NewObjectiveGroupWizard from '@/components/objective-groups/NewObjectiveGroupWizard';
  import EditObjectiveGroupWizard from '@/components/objective-groups/EditObjectiveGroupWizard';

  export default {
    name: 'App',

    components: {
      DefaultLayout,
      SimpleLayout,
      BlankLayout,
      Modal,
      NewContentBlockWizard,
      EditContentBlockWizard,
      NewRoomEntryWizard,
      EditRoomEntryWizard,
      NewObjectiveGroupWizard,
      EditObjectiveGroupWizard
    },

    computed: {
      layout() {
        return (this.$route.meta.layout || 'default') + '-layout';
      },
      showModal() {
        return this.$store.state.showModal
      }
    },

    mounted() {
    }
  }
</script>

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

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