<script
    setup
    lang="ts"
>
    /* eslint-disable */
    import ShiftList from 'src/modules/timesheets/components/shift-list.vue';
    import ExpenseDialog from 'src/modules/timesheets/components/expense-dialog.vue';
    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
    import TimesheetErrorWidget from 'src/modules/timesheets/components/timesheet-error-widget.vue';
    import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';

    import { computed } from 'vue';
    import { useShiftApi } from 'src/modules/timesheets/composables/use-shift-api';
    import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
    import { useExpensesStore } from 'src/stores/expense-store';
    import { useTimesheetStore } from 'src/stores/timesheet-store';


    const expenses_store = useExpensesStore();
    const timesheet_store = useTimesheetStore();
    const timesheet_api = useTimesheetApi();
    const shift_api = useShiftApi();
    const has_shift_errors = computed(() => timesheet_store.all_current_shifts.filter(shift => shift.has_error === true).length > 0);

    const { mode = 'normal' } = defineProps<{
        mode?: 'approval' | 'normal';
    }>();

</script>

<template>
    <div class="column flex-center full-width">
        <LoadingOverlay v-model="timesheet_store.is_loading" />

        <q-card
            flat
            class="transparent full-width"
        >
            <q-card-section
                :horizontal="$q.screen.gt.sm"
                class="q-px-md items-center q-mb-md"
                :class="$q.screen.lt.md ? 'column' : ''"
            >
                <!-- navigation btn -->
                <PayPeriodNavigator
                    v-if="mode === 'normal'"
                    @date-selected="date_value => timesheet_api.getTimesheetsByDate(date_value)"
                    @pressed-previous-button="timesheet_api.getTimesheetsByCurrentPayPeriod"
                    @pressed-next-button="timesheet_api.getTimesheetsByCurrentPayPeriod"
                />

                <!-- mobile expenses button -->
                <q-btn
                    v-if="$q.screen.lt.md && mode === 'normal'"
                    push
                    rounded
                    color="accent"
                    icon="receipt_long"
                    :label="$t('timesheet.expense.open_btn')"
                    class="q-mt-sm"
                    @click="expenses_store.open"
                />

                <q-space />

                <!-- save timesheet changes button -->
                <q-btn
                    v-if="mode === 'normal'"
                    push
                    rounded
                    :disable="timesheet_store.is_loading || has_shift_errors"
                    :color="timesheet_store.is_loading || has_shift_errors ? 'grey-5' : 'accent'"
                    icon="upload"
                    :label="$t('shared.label.save')"
                    class="q-mr-md"
                    @click="shift_api.saveShiftChanges"
                />

                <!-- desktop expenses button -->
                <q-btn
                    v-if="mode === 'normal'"
                    push
                    rounded
                    color="accent"
                    icon="receipt_long"
                    :label="$t('timesheet.expense.open_btn')"
                    @click="expenses_store.open"
                />

            </q-card-section>

            <q-card-section class="q-pa-none">
                <TimesheetErrorWidget />
            </q-card-section>

            <ShiftList :mode="mode" />

            <q-card-actions align="right">
                <q-btn
                    v-if="mode === 'approval'"
                    push
                    rounded
                    :disable="timesheet_store.is_loading"
                    color="accent"
                    icon="upload"
                    :label="$t('shared.label.save')"
                    class="q-mr-md"
                    @click="shift_api.saveShiftChanges"
                />
            </q-card-actions>
        </q-card>
        <ExpenseDialog />
    </div>
</template>