<script
    setup
    lang="ts"
>
    import ShiftList from 'src/modules/timesheets/components/shift-list.vue';
    import ShiftCrudDialog from 'src/modules/timesheets/components/shift-crud-dialog.vue';
    import ExpenseCrudDialog from 'src/modules/timesheets/components/expense-crud-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/api/use-timesheet-api';
    import { useExpensesStore } from 'src/stores/expense-store';
    import { provide } from 'vue';

    const { open } = useExpensesStore();

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

    const { is_loading } = useTimesheetStore();
    const { getPayPeriodDetailsByDate, getPreviousPayPeriodDetails, getNextPayPeriodDetails } = useTimesheetApi();

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

<template>
    <q-card
        flat
        class="q-mt-md bg-secondary full-width"
    >
        <q-inner-loading
            :showing="is_loading"
            color="primary"
        />

        <q-card-section
            :horizontal="$q.screen.gt.sm"
            class="q-px-lg items-center"
            :class="$q.screen.lt.md ? 'column' : ''"
        >
            <!-- navigation btn -->
            <PayPeriodNavigator
                @date-selected="getPayPeriodDetailsByDate"
                @pressed-previous-button="getPreviousPayPeriodDetails"
                @pressed-next-button="getNextPayPeriodDetails"
            />

            <!-- 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(employeeEmail)"
            />

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

            <q-space />

            <!-- 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(employeeEmail)"
            />

        </q-card-section>

        <q-card-section :horizontal="$q.screen.gt.sm">
            <ShiftList :dense="dense"/>
        </q-card-section>
    </q-card>

    <ExpenseCrudDialog />

    <ShiftCrudDialog :employee-email="employeeEmail" />
</template>