<script
    setup
    lang="ts"
>
    import { computed } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { colors } from 'quasar';
    import { useQuasar } from 'quasar';
    import { Doughnut } from 'vue-chartjs';
    import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale } from 'chart.js';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
    import type { Timesheet, TotalHours } from 'src/modules/timesheets/models/timesheet.models';

    const $q = useQuasar();
    const { t } = useI18n();

    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 TRACKABLE_SHIFT_TYPES: (keyof TotalHours)[] = ['regular', 'evening', 'emergency', 'overtime', 'holiday', 'vacation']

    const SHIFT_TYPE_LABELS = [
        t('shared.shift_type.regular'),
        t('shared.shift_type.evening'),
        t('shared.shift_type.emergency'),
        t('shared.shift_type.overtime'),
        t('shared.shift_type.holiday'),
        t('shared.shift_type.vacation'),
    ];

    const shift_type_data = computed(() => {
        const initial_totals = new Array(TRACKABLE_SHIFT_TYPES.length).fill(0);

        return timesheet_store.timesheets.reduce((accumulator: number[], timesheet: Timesheet) => {
            TRACKABLE_SHIFT_TYPES.forEach( (trackable_shift_type, index) => {
                accumulator[index]! += timesheet.weekly_hours[trackable_shift_type] ?? 0;
            });

            return accumulator;
        }, initial_totals);
    });
</script>

<template>
    <div
        style="min-height: 100px;"
        :style="$q.screen.lt.md ? 'max-height: 150px;' : ''"
    >
        <Doughnut
            :data="{
                labels: SHIFT_TYPE_LABELS,
                datasets: [{
                    data: shift_type_data,
                    backgroundColor: [
                        colors.getPaletteColor('accent'),   // Regular
                        colors.getPaletteColor('green-10'), // Evening
                        colors.getPaletteColor('warning'),  // Emergency
                        colors.getPaletteColor('negative'), // Overtime
                    ]
                }],
            }"
            :options="({
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function (context) {
                                context.formattedValue = getHoursMinutesStringFromHoursFloat(context.parsed);
                            }
                        },
                    },

                    legend: {
                        labels: {
                            boxWidth: 15,
                        }
                    }
                }
            })"
        />
    </div>
</template>