<script setup lang="ts">
    import { ref } from 'vue';
    import { Bar } from 'vue-chartjs';
    import { useI18n } from 'vue-i18n';
    import { useQuasar } from 'quasar';
    import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale, type ChartData, type ChartDataset } from 'chart.js';
    import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
    import type { Expense } from 'src/modules/timesheets/types/expense.interfaces';

    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 props = defineProps<{
        rawData: PayPeriodEmployeeDetails | undefined;
    }>();

    const expenses_dataset = ref<ChartDataset<'bar'>[]>([]);
    const expenses_labels = ref<string[]>([]);

    const getExpensesData = (): ChartData<'bar'> => {
        if (props.rawData) {
            const all_weeks = [props.rawData.week1, props.rawData.week2];
            const all_days = all_weeks.flatMap( week => Object.values(week.expenses));
            const all_days_dates = all_weeks.flatMap( week => Object.values(week.shifts))          

            const all_costs = all_days.map( day => getTotalAmounts(day.cash));
            const all_mileage = all_days.map( day => getTotalAmounts(day.km));
            
            
            expenses_dataset.value = [
                {
                    label: t('timesheet_approvals.table.expenses'),
                    data: all_costs,
                    backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
                },
                {
                    label: t('timesheet_approvals.table.mileage'),
                    data: all_mileage,
                    backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
                }
            ]

            expenses_labels.value = all_days_dates.map( day => day.short_date);
        }

        return {
            datasets: expenses_dataset.value,
            labels: expenses_labels.value
        };
    };

    const getTotalAmounts = (expenses: Expense[]): number => {
        let total_amount = 0;

        for (const expense of expenses) {
            total_amount += expense.amount;
        }

        return total_amount;
    }
</script>

<template>
    <div>
        <Bar 
            :data="getExpensesData()"
            :options="({
                indexAxis: $q.screen.lt.md? 'y' : 'x',
                plugins: {
                
                    title: {
                        display: true,
                        text: t('timesheet_approvals.chart.expenses_title'),
                    },
                    legend:{
                        labels:{
                            boxWidth: 15,
                        }
                    }
                },
                scales: {
                    x: {
                        stacked: true
                    },
                    y: {
                        suggestedMin: 0,
                        suggestedMax: 100,
                        stacked: true
                    }
                }
            })"
        />
    </div>
</template>