<template>
	<NotConnectedHeroCard v-if="view === 'not-connected'" />
	<DashboardEmptyState  v-else-if="view === 'empty'" />
	<DashboardReport      v-else />
</template>

<script setup>
	import { computed, onMounted } from 'vue';
	import { useStore } from '@/dashboard/store.js';
	import NotConnectedHeroCard from './dashboard/NotConnectedHeroCard.vue';
	import DashboardEmptyState  from './dashboard/DashboardEmptyState.vue';
	import DashboardReport      from './dashboard/DashboardReport.vue';

	const store = useStore();

	const isConnected = computed( () => Boolean( SimpleStatsVue.isUserLoggedIn ) );

	const view = computed( () => {
		if ( ! isConnected.value )    return 'not-connected';
		if ( ! store.hasReportData )  return 'empty';
		return 'report';
	} );

	onMounted( () => {
		if ( isConnected.value ) {
			store.fetchReport();
		}
	} );
</script>
