<script
    setup
    lang="ts"
>
    /* eslint-disable */
    import { computed, ref } from 'vue';
    import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
    import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
    import { useExpensesStore } from 'src/stores/expense-store';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
    import { overview_column_names, pay_period_overview_columns, type TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';

    const expenses_store = useExpensesStore();
    const timesheet_store = useTimesheetStore();
    const timesheet_approval_api = useTimesheetApprovalApi();

    const visible_columns = ref<string[]>([
        overview_column_names.REGULAR,
        overview_column_names.EVENING,
        overview_column_names.EMERGENCY,
        overview_column_names.SICK,
        overview_column_names.VACATION,
        overview_column_names.HOLIDAY,
        overview_column_names.OVERTIME,
        overview_column_names.IS_APPROVED,
    ]);

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

    const onClickedDetails = async (row: TimesheetOverview) => {
        timesheet_store.current_pay_period_overview = row;
        await timesheet_store.getTimesheetsByOptionalEmployeeEmail(row.email);
        
        timesheet_store.is_details_dialog_open = true;
    };
</script>

<template>
    <div class="q-px-md full-height">
        <LoadingOverlay v-model="timesheet_store.is_loading" />
        <transition
            appear
            enter-active-class="animated fadeInUp"
            leave-active-class="animated fadeOutDown"
            mode="out-in"
        >
            <q-table
                :key="timesheet_store.is_approval_grid_mode ? 'grid' : 'list'"
                :visible-columns="visible_columns"
                :rows="overview_rows"
                :columns="pay_period_overview_columns"
                row-key="email"
                :filter="timesheet_store.search_filter"
                :grid="timesheet_store.is_approval_grid_mode"
                :dense="timesheet_store.is_approval_grid_mode"
                hide-pagination
                color="accent"
                :rows-per-page-options="[0]"
                card-container-class="justify-center"
                class="bg-transparent"
                :class="timesheet_store.is_approval_grid_mode ? '' : 'sticky-header-table no-shadow'"
                table-class="q-pa-none q-mx-md rounded-10 bg-dark shadow-15"
                :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 #header="props">
                    <q-tr
                        :props="props"
                        class="bg-primary"
                    >
                        <q-th
                            v-for="col in props.cols"
                            :key="col.name"
                            :props="props"
                        >
                            <span class="text-uppercase text-weight-bolder text-white">
                                {{ $t(col.label) }}
                            </span>
                        </q-th>
                    </q-tr>
                </template>

                <template #body-cell="props">
                    <q-td
                        :props="props"
                        class="text-weight-medium"
                    >
                        <transition
                            appear
                            enter-active-class="animated fadeInUp slow"
                            leave-active-class="animated fadeOutDown"
                            mode="out-in"
                        >
                            <div
                                :key="props.rowIndex + (timesheet_store.pay_period?.pay_period_no ?? 0)"
                                class="rounded-5"
                                style="font-size: 1.2em;"
                                :style="`animation-delay: ${props.rowIndex / 30}s;`"
                            >
                                <transition
                                    v-if="props.col.name === 'is_approved'"
                                    enter-active-class="animated swing"
                                    mode="out-in"
                                >
                                    <q-btn
                                        :key="props.row.is_approved"
                                        flat
                                        dense
                                        :icon="props.value ? 'lock' : 'lock_open'"
                                        :color="props.value ? 'white' : 'grey-5'"
                                        class="rounded-5 z-top"
                                        :class="props.value ? 'bg-accent' : ''"
                                        @click.stop="props.row.is_approved = !props.row.is_approved"
                                    />
                                </transition>

                                <div v-else-if="props.col.name === 'employee_name'">
                                    <span class="text-h5 text-uppercase text-accent q-mr-xs">
                                        {{ props.value.split(' ')[0] }}
                                    </span>
                                    <span class="text-uppercase text-weight-light">{{ props.value.split(' ')[1]
                                    }}</span>
                                </div>
                                <span v-else>{{ props.value }}</span>
                            </div>
                        </transition>
                    </q-td>
                </template>

                <!-- Template for individual employee cards -->
                <template #item="props: { row: TimesheetOverview, rowIndex: number }">
                    <OverviewListItem
                        v-model="props.row.is_approved"
                        :key="props.row.email + timesheet_store.pay_period?.pay_period_no"
                        :index="props.rowIndex"
                        :row="props.row"
                        @click-details="overview => onClickedDetails(overview)"
                    />
                </template>

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

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

<style lang="sass">
.sticky-header-table
  thead tr:first-child th
    background-color: var(--q-primary)
    margin-top: none

  thead tr th
    position: sticky
    z-index: 1
  thead tr:first-child th
    top: 0px

  &.q-table--loading thead tr:last-child th
    top: 48px

  tbody
    scroll-margin-top: 48px
</style>