<script setup lang="ts">
import { Head, usePage } from '@inertiajs/vue3';
import { computed } from 'vue';
import { MainService } from '@/Stores/main';
import {
    mdiAccountMultiple,
    mdiDatabaseOutline,
    mdiChartTimelineVariant,
    mdiFinance,
    mdiMonitorCellphone,
    mdiReload,
    mdiChartPie,
} from '@mdi/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 CardBoxClient from '@/Components/CardBoxClient.vue';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
// import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitea.vue';
import CardBoxDataset from '@/Components/CardBoxDataset.vue';
import type { User } from '@/Dataset';
const mainService = MainService()

// const chartData = ref();
const fillChartData = async () => {
    await mainService.fetchChartData();
    // chartData.value = chartConfig.sampleChartData();
    // chartData.value = mainService.graphData;
};
const chartData = computed(() => mainService.graphData);
// onMounted(async () => {
//     await mainService.fetchChartData("2022");
// });

// 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, 5));
const authors = computed(() => mainService.authors);
const datasets = computed(() => mainService.datasets);
const datasetBarItems = computed(() => mainService.datasets.slice(0, 5));
const submitters = computed(() => mainService.clients);
const user = computed(() => {
    return usePage().props.authUser as User;
});

const userHasRoles = (roleNames: Array<string>): boolean => {
    return user.value.roles.some(role => roleNames.includes(role.name));
};
</script>

<template>
    <LayoutAuthenticated :showAsideMenu="false">
        <Head title="Dashboard" />

        <SectionMain>
            <SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Overview" main>
                <!-- <BaseButton
                    href=""
                    target="_blank"
                    :icon="mdiGithub"
                    label="Star on GeoSphere Forgejo"
                    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"
                />
                <!-- trend="193" -->
                <CardBoxWidget                    
                    trend-type="info"
                    color="text-blue-500"
                    :icon="mdiDatabaseOutline"
                    :number="datasets.length"
                    label="Publications"
                />
                <!-- trend="+25%" -->
                <CardBoxWidget                    
                    trend-type="up"
                    color="text-purple-500"
                    :icon="mdiChartTimelineVariant"
                    :number="submitters.length"
                    label="Submitters"
                />
            </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.identifier_orcid"
                        :count="client.dataset_count"
                        
                    />
                </div>
                <div class="flex flex-col justify-between">
                    <CardBoxDataset
                        v-for="(dataset, index) in datasetBarItems"
                        :key="index"
                       :dataset="dataset"
                    />
                </div>
            </div>

            <!-- <SectionBannerStarOnGitHub /> -->

            <SectionTitleLineWithButton :icon="mdiChartPie" title="Trends overview: Publications per month" />
            <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 v-if="userHasRoles(['administrator'])" :icon="mdiAccountMultiple" title="Submitters" />
            <!-- <NotificationBar color="info" :icon="mdiMonitorCellphone"> <b>Responsive table.</b> Collapses on mobile </NotificationBar> -->
            <CardBox v-if="userHasRoles(['administrator'])" :icon="mdiMonitorCellphone" title="Responsive table" has-table>
                <TableSampleClients />
            </CardBox>
        </SectionMain>
    </LayoutAuthenticated>
</template>
