<script
    setup
    lang="ts"
>
    import { 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 { current_pay_period_overview } = useTimesheetStore();

    const shift_type_labels = ref<string[]>([]);
    const shift_type_totals = ref<ChartDataset<'doughnut'>[]>([{ data: [40, 0, 2, 5], }]);


    shift_type_totals.value = [{
        data: [
            current_pay_period_overview.regular_hours,
            current_pay_period_overview.evening_hours,
            current_pay_period_overview.emergency_hours,
            current_pay_period_overview.overtime_hours,
        ],
        backgroundColor: [
            colors.getPaletteColor('green-5'),                                          // Regular
            colors.getPaletteColor('green-9'),                                          // Evening
            getComputedStyle(document.body).getPropertyValue('--q-warning').trim(),     // Emergency
            getComputedStyle(document.body).getPropertyValue('--q-negative').trim(),    // Overtime
        ]
    }];

    shift_type_labels.value = [
        current_pay_period_overview.regular_hours.toString() + 'h',
        current_pay_period_overview.evening_hours.toString() + 'h',
        current_pay_period_overview.emergency_hours.toString() + 'h',
        current_pay_period_overview.overtime_hours.toString() + 'h',
    ]


    const data = {
        labels: shift_type_labels.value,
        datasets: shift_type_totals.value,
    }

</script>

<template>
    <div>
        <Doughnut
            :data="data"
            :options="({
                plugins: {
                    legend: {
                        labels: {
                            boxWidth: 15,
                        }
                    }
                }
            })"
        />
    </div>
</template>