<script
    setup
    lang="ts"
>
    /* eslint-disable */
    import { onMounted, ref } from 'vue';
    import { colors } from 'quasar';
    import { useQuasar } from 'quasar';
    import { Doughnut } from 'vue-chartjs';
    import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale, type ChartDataset } from 'chart.js';
    import { useTimesheetStore } from 'src/stores/timesheet-store';

    const $q = useQuasar();

    ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale);
    ChartJS.defaults.font.family = '"Roboto", sans-serif';
    ChartJS.defaults.maintainAspectRatio = false;
    ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';

    const timesheet_store = useTimesheetStore();

    const shift_type_labels = ref<string[]>([
        timesheet_store.current_pay_period_overview!.regular_hours.toString() + 'h',
        timesheet_store.current_pay_period_overview!.other_hours.evening_hours.toString() + 'h',
        timesheet_store.current_pay_period_overview!.other_hours.emergency_hours.toString() + 'h',
        timesheet_store.current_pay_period_overview!.other_hours.overtime_hours.toString() + 'h',
    ]);

    const shift_type_totals = ref<ChartDataset<'doughnut'>[]>([]);

    onMounted(() => {
        setTimeout(() => {
            shift_type_totals.value = [{
                data: [
                    timesheet_store.current_pay_period_overview!.regular_hours,
                    timesheet_store.current_pay_period_overview!.other_hours.evening_hours,
                    timesheet_store.current_pay_period_overview!.other_hours.emergency_hours,
                    timesheet_store.current_pay_period_overview!.other_hours.overtime_hours,
                ],
                backgroundColor: [
                    colors.getPaletteColor('accent'),   // Regular
                    colors.getPaletteColor('green-10'), // Evening
                    colors.getPaletteColor('warning'),  // Emergency
                    colors.getPaletteColor('negative'), // Overtime
                ]
            }]

        }, 100);
    });
</script>

<template>
    <div
        style="min-height: 100px;"
        :style="$q.screen.lt.md ? 'max-height: 150px;' : ''"
    >
        <Doughnut
            :data="{
                labels: shift_type_labels,
                datasets: shift_type_totals,
            }"
            :options="({
                plugins: {
                    legend: {
                        labels: {
                            boxWidth: 15,
                        }
                    }
                }
            })"
        />
    </div>
</template>