<script setup lang="ts">
import { computed, ref } from 'vue';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
import { pay_period_overview_columns, type PayPeriodOverview } from 'src/modules/timesheet-approval/models/pay-period-overview.models';

const timesheet_store = useTimesheetStore();
const filter = ref<string | number | null>('');

const employeeEmail = defineModel();

const emit = defineEmits<{
    'clickedDetailsButton': [email: string];
}>();

const overview_rows = computed(() => timesheet_store.pay_period_overviews[0]?.regular_hours === -1 ?
    [] :
    timesheet_store.pay_period_overviews
)

const onClickedDetails = async (employee_email: string, row: PayPeriodOverview) => {
    employeeEmail.value = employee_email;
    emit('clickedDetailsButton', employee_email);
    timesheet_store.current_pay_period_overview = row;
    await timesheet_store.getPayPeriodDetailsByEmployeeEmail(employee_email);
};
</script>

<template>
    <div class="q-pa-md">
        <q-table
            :rows="overview_rows"
            :columns="pay_period_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' : 'row'"
                >
                    <PayPeriodNavigator />

                    <q-space />

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

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

            <!-- Template for individual employee cards -->
            <template #item="props: { row: PayPeriodOverview, key: string }">
                <OverviewListItem
                    v-model="props.row.is_approved"
                    :row="props.row"
                    @click-details="overview => onClickedDetails(props.row.email, overview)"
                />
            </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">
                    <q-icon
                        size="4em"
                        :name="filter ? 'filter_alt_off' : 'error_outline'"
                    />

                    <span class="text-h6">
                        {{ message }}
                    </span>
                </div>
            </template>
        </q-table>
    </div>
</template>