<template>
  <div>
    <component :is="layout"></component>
    <v-content>
      <router-view></router-view>
    </v-content>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import TutorLayout from '@/pages/tutor/TutorLayout'
import StudentLayout from '@/pages/student/StudentLayout'
import ReviewerLayout from '@/pages/reviewer/ReviewerLayout'
import { Authentication } from '@/store/modules/authentication'

export default {
  components: {
    ReviewerLayout,
    StudentLayout,
    TutorLayout },
  name: 'layout-selector',
  computed: {
    isStudent () { return Authentication.isStudent },
    isTutor () { return Authentication.isTutor },
    isReviewer () { return Authentication.isReviewer },
    layout () {
      if (this.isStudent) {
        return 'student-layout'
      } else if (this.isTutor) {
        return 'tutor-layout'
      } else if (this.isReviewer) {
        return 'reviewer-layout'
      }
    }
  }
}
</script>

<style scoped>

</style>