<script setup lang="ts">
    import { ref } from 'vue';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import OverviewListItem from 'src/modules/timesheet-approval/components/employee-overview/overview-list-item.vue';
    import QTableFilters from 'src/modules/shared/components/utils/q-table-filters.vue';
    import { pay_period_employee_overview_columns, type PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';

    const timesheet_store = useTimesheetStore();

    // const FORWARD = 1
    // const BACKWARD = -1
    const filter = ref<string | number | null>('');

    const onClickedDetails = async ( employee_email: string ) => {
        await timesheet_store.getPayPeriodEmployeeDetailsByEmployeeEmail(employee_email);
    };
</script>

<template>
    <div class="q-pa-md">
        <q-table 
        :rows="timesheet_store.pay_period_employee_overview_list" 
        :columns="pay_period_employee_overview_columns"
        row-key="email" 
        :filter="filter" 
        grid 
        dense
        hide-pagination
        color="primary"
        :rows-per-page-options="[0]" 
        card-container-class="justify-center"
        :loading="timesheet_store.is_loading"
        :no-data-label="$t('shared.error.no_data_found')"
        :no-results-label="$t('shared.error.no_search_results')"
        :loading-label="$t('shared.label.loading')"
        >
            <template #top>
                <div class="full-width" :class="$q.screen.lt.md ? 'text-center q-gutter-sm' : 'row'">
                    <!-- Calendar Picker goes here -->

                    <q-space />

                    <!-- Grid-or-List toggle goes here -->

                    <QTableFilters v-model="filter"/>            
                </div>
            </template>

            <!-- Template for individual employee cards -->
            <template #item="props: { row: PayPeriodEmployeeOverview, key: string }">
                <OverviewListItem
                    v-model="props.row.is_approved" 
                    :row="props.row"
                    @click-details="onClickedDetails(props.row.email)"
                />
            </template>

            <!-- Template for custome failed-to-load state -->
            <template #no-data="{ message, filter }">
                <div class="full-width column items-center text-primary q-gutter-sm">
                    <span class="text-h6 q-mt-xl">
                        {{ message }}
                    </span>
                    <q-icon 
                    size="4em" 
                    :name="filter ? 'filter_alt_off' : 'error_outline'" 
                    />
                </div>
            </template>
        </q-table>
    </div>
</template>