<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
import { computed, ref, onMounted } from 'vue';
import { MainService } from '@/Stores/main';
// import { Inertia } from '@inertiajs/inertia';
import {
	mdiAccountMultiple,
	mdiDatabaseOutline,
	mdiChartTimelineVariant,
	mdiFinance,
	mdiMonitorCellphone,
	mdiReload,
	mdiGithub,
	mdiChartPie,
} from '@mdi/js';
// import { containerMaxW } from '@/config.js'; // "xl:max-w-6xl xl:mx-auto"
import * as chartConfig from '@/Components/Charts/chart.config.js';
import LineChart from '@/Components/Charts/LineChart.vue';
import SectionMain from '@/Components/SectionMain.vue';
import CardBoxWidget from '@/Components/CardBoxWidget.vue';
import CardBox from '@/Components/CardBox.vue';
import TableSampleClients from '@/Components/TableSampleClients.vue';
import NotificationBar from '@/Components/NotificationBar.vue';
import BaseButton from '@/Components/BaseButton.vue';
import CardBoxTransaction from '@/Components/CardBoxTransaction.vue';
import CardBoxClient from '@/Components/CardBoxClient.vue';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitea.vue';
const chartData = ref();
const fillChartData = () => {
	chartData.value = chartConfig.sampleChartData();
};
onMounted(() => {
	fillChartData();
});
const mainService = MainService();
/* Fetch sample data */
mainService.fetch('clients');
mainService.fetch('history');

mainService.fetchApi('authors');
mainService.fetchApi('datasets');

// const clientBarItems = computed(() => mainService.clients.slice(0, 4));
const transactionBarItems = computed(() => mainService.history);

const authorBarItems = computed(() => mainService.authors.slice(0, 4));
const authors = computed(() => mainService.authors);
const datasets = computed(() => mainService.datasets);
// const props = defineProps({
// 	user: {
// 		type: Object,
// 		default: () => ({}),
// 	}
// });
</script>

<template>
	<LayoutAuthenticated>

		<Head title="Dashboard" />

		<!-- <section class="p-6" v-bind:class="containerMaxW"> -->
		<SectionMain>
			<SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Overview" main>
				<BaseButton href="https://gitea.geologie.ac.at/geolba/tethys" target="_blank" :icon="mdiGithub"
					label="Star on Gitea" color="contrast" rounded-full small />
			</SectionTitleLineWithButton>

			<div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
				<CardBoxWidget trend="12%" trend-type="up" color="text-emerald-500" :icon="mdiAccountMultiple"
					:number="authors.length" label="Authors" />
				<CardBoxWidget trend="193" trend-type="info" color="text-blue-500" :icon="mdiDatabaseOutline" :number="datasets.length"
					label="Publications" />
					<!-- <CardBoxWidget trend="193" trend-type="info" color="text-blue-500" :icon="mdiCartOutline" :number="datasets.length"
					prefix="$" label="Publications" /> -->
				<CardBoxWidget trend="Overflow" trend-type="alert" color="text-red-500" :icon="mdiChartTimelineVariant"
					:number="256" suffix="%" label="Performance" />
			</div>

			<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
				<div class="flex flex-col justify-between">
					<CardBoxClient
						v-for="client in authorBarItems"
						:key="client.id"
						:name="client.name"
						:email="client.email"
						:date="client.created_at"
						:text="client.datasetCount"						
					/>
				</div>
				<div class="flex flex-col justify-between">
					<CardBoxTransaction v-for="(transaction, index) in transactionBarItems" :key="index"
						:amount="transaction.amount" :date="transaction.date" :business="transaction.business"
						:type="transaction.type" :name="transaction.name" :account="transaction.account" />
				</div>				
			</div>

			<SectionBannerStarOnGitHub />

			<SectionTitleLineWithButton :icon="mdiChartPie" title="Trends overview (to do publications per year)" />
			<CardBox title="Performance" :icon="mdiFinance" :header-icon="mdiReload" class="mb-6"
				@header-icon-click="fillChartData">
				<div v-if="chartData">
					<line-chart :data="chartData" class="h-96" />
				</div>
			</CardBox>

			<SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Submitters (to do)" />

			<NotificationBar color="info" :icon="mdiMonitorCellphone">
				<b>Responsive table.</b> Collapses on mobile
			</NotificationBar>

			<CardBox :icon="mdiMonitorCellphone" title="Responsive table" has-table>
				<TableSampleClients />
			</CardBox>
		</SectionMain>
		<!-- </section> -->

	</LayoutAuthenticated>
</template>
