<script
    setup
    lang="ts"
>
    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 ShiftListLegend from 'src/modules/timesheets/components/shift-list-legend.vue';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
    import { useExpensesStore } from 'src/stores/expense-store';
    import { provide } from 'vue';
import { useShiftApi } from 'src/modules/timesheets/composables/use-shift-api';

    const { open } = useExpensesStore();
    const shift_api = useShiftApi();

    const { employeeEmail, dense = false } = defineProps<{
        employeeEmail: string;
        dense?: boolean;
    }>();

    const timesheet_store = useTimesheetStore();
    const timesheet_api = useTimesheetApi();

    provide('employeeEmail', employeeEmail);
</script>

<template>
    <div class="column flex-center full-width">

        <q-dialog
            v-model="timesheet_store.is_loading"
            transition-show="jump-down"
            transition-hide="jump-down"
        >
            <q-card class="q-pa-xl rounded-200 bg-white frosted-glass">
                <q-spinner-radio
                    color="primary"
                    size="20vh"
                />
            </q-card>
        </q-dialog>

        <q-card
            flat
            class="transparent full-width"
        >
            <q-card-section
                v-if="!dense"
                :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="!dense"
                    @date-selected="timesheet_api.getTimesheetsByDate(employeeEmail)"
                    @pressed-previous-button="timesheet_api.getTimesheetsByCurrentPayPeriod(employeeEmail)"
                    @pressed-next-button="timesheet_api.getTimesheetsByCurrentPayPeriod(employeeEmail)"
                />

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

                <!-- shift's colored legend -->
                <!-- <ShiftListLegend :is-loading="false" /> -->

                <q-space />
                <!-- save timesheet changes button -->
                 <q-btn
                    v-if="$q.screen.gt.sm"
                    push
                    rounded
                    :disable="timesheet_store.is_loading"
                    color="primary"
                    icon="upload"
                    :label="$t('shared.label.save')"
                    class="q-mr-md"
                    @click="shift_api.saveShiftChanges"
                />

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

            </q-card-section>

            <ShiftList :dense="dense" />
        </q-card>
        <ExpenseDialog />
    </div>
</template>