<script
    setup
    lang="ts"
>
    import { computed, onMounted } from 'vue';
    import { useAuthStore } from 'src/stores/auth-store';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';

    const { mode = 'totals', timesheetMode = 'normal', totalHours = 0, totalExpenses = 0 } = defineProps<{
        mode: 'total-hours' | 'off-hours';
        timesheetMode: 'approval' | 'normal';
        totalHours?: number;
        totalExpenses?: number;
    }>();

    const auth_store = useAuthStore();
    const timesheetStore = useTimesheetStore();
    const is_management = auth_store.user?.user_module_access.includes('timesheets_approval');

    const vacationHours = computed(() => timesheetStore.paid_time_off_totals.vacation_hours); 
    const sickHours = computed(() => timesheetStore.paid_time_off_totals.sick_hours); 
    const bankedHours = computed(() => timesheetStore.paid_time_off_totals.banked_hours);

    onMounted(async () => {
        await timesheetStore.getPaidTimeOffTotalsWithOptionalEmployeeEmail();
    })
</script>

<template>
    <div
        class="column full-width shadow-4 rounded-5 q-pa-sm"
        style="border: 1px solid var(--q-accent);"
    >
        <div
            v-if="mode === 'total-hours'"
            class="col column full-width"
        >
            <div class="col row full-width">
                <span class="col-auto text-uppercase text-caption text-bold text-accent">
                    {{ $t('timesheet.total_hours') }}
                </span>

                <span class="col text-right">{{ getHoursMinutesStringFromHoursFloat(totalHours) }}</span>
            </div>

            <div class="col row full-width">
                <span class="col-auto text-uppercase text-caption text-bold text-accent">
                    {{ $t('timesheet.total_expenses') }}
                </span>

                <span class="col text-right">{{ totalExpenses }}$</span>
            </div>
        </div>


        <div
            v-else
            class="col column full-width"
        >
            <div class="col row full-width">
                <span class="col-auto text-uppercase text-caption text-bold text-accent">
                    {{ $t('timesheet.vacation_available') }}
                </span>

                <div class="col row">
                    <span class="col text-right">{{ getHoursMinutesStringFromHoursFloat(vacationHours) }}</span>
                    <span class="col-auto text-right q-pl-xs">{{ ' (' + Math.floor(vacationHours / 8) }}</span>
                    <span class="col-auto q-pl-xs">{{ $t('shared.label.day') }}{{ (Math.floor(vacationHours / 8) !== 1 ?
                        's' : '') + ')' }}</span>
                </div>
            </div>

            <div
                v-if="is_management"
                class="col row full-width"
            >
                <span class="col-auto text-uppercase text-caption text-bold text-accent">
                    {{ $t('timesheet.sick_available') }}
                </span>

                <span class="col text-right">{{ getHoursMinutesStringFromHoursFloat(sickHours) }}</span>
            </div>

            <div
                v-if="timesheetMode === 'normal'"
                class="col row full-width"
            >
                <span class="col-auto text-uppercase text-caption text-bold text-accent">
                    {{ $t('timesheet.banked_available') }}
                </span>

                <span class="col text-right">{{ getHoursMinutesStringFromHoursFloat(bankedHours) }}</span>
            </div>
        </div>
    </div>
</template>