<template>
	<div class="simplestats-dashboard-report">
		<div v-if="store.report.error && store.report.loaded" class="simplestats-dashboard-report__toast">
			<span>{{ text_toast }}</span>
			<button type="button" @click="store.fetchReport()">{{ text_retry }}</button>
		</div>

		<DashboardTopBar />
		<DashboardHeroCard />

		<div v-if="store.report.error && ! store.report.loaded" class="simplestats-dashboard-report__error">
			<p>{{ text_error_heading }}</p>
			<button type="button" class="simplestats-dashboard-report__retry" @click="store.fetchReport()">{{ text_retry }}</button>
		</div>

		<DashboardDataSections v-else />
	</div>
</template>

<script setup>
	import { useStore } from '@/dashboard/store.js';

	import DashboardTopBar       from './DashboardTopBar.vue';
	import DashboardHeroCard     from './DashboardHeroCard.vue';
	import DashboardDataSections from './DashboardDataSections.vue';

	const store = useStore();

	const text_error_heading = wp.i18n.__( "Couldn't load report — try again.", 'simplestats-friendly-website-analytics' );
	const text_retry         = wp.i18n.__( 'Retry', 'simplestats-friendly-website-analytics' );
	const text_toast         = wp.i18n.__( "Couldn't refresh.", 'simplestats-friendly-website-analytics' );
</script>
