<script
    setup
    lang="ts"
>
    import ShiftList from 'src/modules/timesheets/components/shift/shift-list.vue';
    import ShiftCrudDialog from 'src/modules/timesheets/components/shift/shift-crud-dialog.vue';
    import ExpenseCrudDialog from 'src/modules/timesheets/components/expenses/expense-crud-dialog.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 { onMounted } from 'vue';

    const { openExpensesDialog } = useExpensesStore();

    const { employeeEmail } = defineProps<{
        employeeEmail: string;
    }>();

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

    onMounted(() => {

    });
</script>

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

        <q-card-section horizontal>
            <!-- expenses button -->
            <q-btn
                color="primary"
                unelevated
                icon="receipt_long"
                :label="$t('timesheet.expense.open_btn')"
                @click="openExpensesDialog"
            />

            <!-- navigation btn -->
            <PayPeriodNavigator
                @date-selected="getPayPeriodDetailsByDate"
                @pressed-previous-button="getPreviousPayPeriodDetails"
                @pressed-next-button="getNextPayPeriodDetails"
            />
        </q-card-section>

        <q-card-section>
            <ShiftList
                :raw-data="pay_period_details"
                :current-pay-period="pay_period"
            />
        </q-card-section>
    </q-card>

    <!-- dialog for Expenses or Shifts -->
    <ExpenseCrudDialog :email="employeeEmail" />

    <!-- shift crud dialog -->
    <ShiftCrudDialog :employee-email="employeeEmail" />
</template>