<script
    setup
    lang="ts"
>
    import { ref, onMounted } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { colors, useQuasar } from 'quasar';
    import { Bar } from 'vue-chartjs';
    import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale, type ChartDataset } from 'chart.js';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import type { TotalHours } from 'src/modules/timesheets/models/timesheet.models';

    interface ChartConfigHoursWorked {
        key: keyof Pick<TotalHours, 'regular' | 'evening' | 'emergency' | 'overtime'>;
        label: string;
        color: string;
    }

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

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

    const timesheet_store = useTimesheetStore();

    const all_days = timesheet_store.timesheets.flatMap(week => week.days);

    const datasetConfig: ChartConfigHoursWorked[] = [
        {
            key: 'regular',
            label: t('shared.shift_type.regular'),
            color: colors.getPaletteColor('accent'),
        },
        {
            key: 'evening',
            label: t('shared.shift_type.evening'),
            color: colors.getPaletteColor('green-10'),
        },
        {
            key: 'emergency',
            label: t('shared.shift_type.emergency'),
            color: colors.getPaletteColor('warning'),
        },
        {
            key: 'overtime',
            label: t('shared.shift_type.overtime'),
            color: colors.getPaletteColor('negative'),
        },
    ];

    const hours_worked_labels = ref<string[]>(all_days.map(day => day.date.slice(-5,)));
    const hours_worked_dataset = ref<ChartDataset<'bar'>[]>([]);

    onMounted(() => {
        setTimeout(() => {
            hours_worked_dataset.value = datasetConfig.map(cfg => ({
                label: cfg.label,
                data: all_days.map(day => day.daily_hours[cfg.key]),
                backgroundColor: cfg.color,
            }));
        }, 100);
    });
</script>

<template>
    <div
        class="bg-dark rounded-10 q-pa-sm"
        :style="`min-height: ${$q.screen.lt.md ? '350px;' : '200px'}`"
    >
        <Bar
            :data="{
                datasets: hours_worked_dataset,
                labels: hours_worked_labels,
            }"
            :options="({
                indexAxis: $q.screen.lt.md ? 'y' : 'x',
                plugins: {
                    legend: {
                        labels: {
                            boxWidth: 15,
                        },
                    },
                    title: {
                        display: true,
                        text: t('timesheet_approvals.chart.hours_worked_title'),
                    }
                },
                scales: {
                    x: {
                        stacked: true,
                    },
                    y: {
                        stacked: true,
                        suggestedMin: 0,
                        suggestedMax: 10,

                    }
                }
            })"
        />
    </div>
</template>