<template>
  <b-container class="dashboard" v-if="showDashboard && companyDashboard">
    <component
      :is="companyDashboard"
      :dashboard-details="dashboardDetails"
      :enrolment-sponsor-id="getLoggedInUser.old_member_id"
    />

    <image-announcement-modal
      v-if="false"
      :image-path="imagePath"
      :to-date="announcementDueDate"
      :application-country-code="affectedCountryList"
      ref="announcement_modal"
    />
  </b-container>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import ImageAnnouncementModal from '@/app/_global/components/elements/ImageAnnouncementModal'

export default {
  name: 'DashboardHome',
  components: { ImageAnnouncementModal },
  data() {
    return {
      dashboardDetails: {},
      imagePath: '',
      announcementDueDate: '2019-11-03', //YYYY-MM-DD
      affectedCountryList: [],
      redirectFrom: '',
      companyDashboard: false,
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.redirectFrom = from.name
    })
  },
  created() {
    this.companyDashboard = this.$appSettings.evo.enable
      ? () => import('@/app/dashboard/home/components/blocks/EvoDashboard')
      : () => import('@/app/dashboard/home/components/blocks/IbsDashboard')
  },
  async mounted() {
    this.loadMemberDashBoardDetail().then(result => {
      this.dashboardDetails = { ...result }
    })
    this.loadCwScheduleList()
  },
  computed: {
    ...mapGetters(['getLoggedInUser']),
    showDashboard() {
      /** Delay user dashboard screen permission render
       * process after preferred contact screen and wait for
       * latest user permission update **/
      return this.redirectFrom === 'PreferredContact' ? !this.isLoading('memberDetails') : true
    },
  },
  methods: {
    ...mapActions(['loadMemberDashBoardDetail', 'loadCwScheduleList']),
  },
}
</script>
