<script setup>
import AppLayout from "../Layouts/AppLayout.vue";
import {useAuthStore} from "../Stores/auth.js";
import {NH1, NSpace, NP, NFlex} from 'naive-ui'
import StartButton from "../Components/StartButton.vue";
import {computed} from "vue";
import {format} from "date-fns";
import {ru} from "date-fns/locale";
import {useNow} from "@vueuse/core";
import {TbArticle, TbChartTreemap, TbDoorExit} from "vue-icons-plus/tb";
import {useReportStore} from "../Stores/report.js";

const authStore = useAuthStore()
const reportStore = useReportStore()

const currentDate = computed(() => {
    const formatted = format(useNow().value, 'PPPPpp', {
        locale: ru
    })

    return formatted.charAt(0).toUpperCase() + formatted.slice(1)
})
</script>

<template>
    <AppLayout>
        <div class="flex flex-col justify-start items-center mt-12">
            <NFlex vertical align="center" justify="center" class="max-w-xl w-full">
                <NSpace vertical align="center">
                    <NH1 class="mb-0!">
                        Привет {{authStore.user.name}}!
                    </NH1>
                    <NP class="mb-4!">
                        {{ currentDate }}
                    </NP>
                </NSpace>

                <StartButton title="Заполнить сводную"
                             description="Заполняется регулярно"
                             href="/report"
                             :icon="TbArticle"
                />
                <StartButton title="Статистика моего отделения"
                             :description="`Ваше отделение в системе: ${authStore.user.current_department.departmentname}`"
                             :href="`/statistic?sent_at=${reportStore.timestampCurrentRange}&groupId=1`"
                             :icon="TbChartTreemap"
                />
                <StartButton title="Выйти из системы"
                             description="Завершение работы с текущей учетной записью"
                             href="/dashboard"
                             :icon="TbDoorExit"
                />
            </NFlex>
        </div>
    </AppLayout>
</template>

<style scoped>

</style>
