<script setup lang="ts">
    import { computed, onMounted, ref } from 'vue';
    import { useEmployeeListApi } from 'src/modules/employee-list/composables/use-employee-api';
    import { useEmployeeStore } from 'src/stores/employee-store';
    import { useI18n } from 'vue-i18n';
    import SupervisorCrewTableItem from './supervisor-crew-table-item.vue';

    import type { EmployeeListTableItem } from '../../types/employee-list-table-interface';
    import type { QTableColumn } from 'quasar';

    const employee_list_api =  useEmployeeListApi();
    const employee_store = useEmployeeStore();
    const is_loading_list = ref<boolean>(true);

    const { t } = useI18n();
    const filter = ref("");
    const is_grid_mode = ref(true);
    const pagination = ref({ rowsPerPage: 0 });

    const employee_list_columns = computed((): QTableColumn<EmployeeListTableItem>[] => [
        {name: 'first_name', label: t('employee_list.table.first_name'), field: 'first_name', align: 'left'},
        {name: 'last_name', label: t('employee_list.table.last_name'), field: 'last_name', align: 'left'},
        {name: 'email', label: t('employee_list.table.email'), field: 'email', align: 'left'},
        {name: 'supervisor_full_name', label: t('employee_list.table.supervisor'), field: 'supervisor_full_name', align: 'left'},
        {name: 'company_name', label: t('employee_list.table.company'), field: 'company_name', align: 'left'},
        {name: 'job_title', label: t('employee_list.table.role'), field: 'job_title', align: 'left'},
    ]);

    onMounted( async () => {
        is_loading_list.value = true;
        await employee_list_api.getEmployeeList();
        is_loading_list.value = false;
    })
</script>

<template>
    <div class="q-pa-lg col">
        <q-table
            dense
            flat
            hide-pagination
            virtual-scroll
            title=" "
            card-style="max-height: 70vh;"
            :rows="employee_store.employeeList" 
            :columns="employee_list_columns" 
            row-key="name"
            v-model:pagination="pagination"
            :rows-per-page-options="[0]"
            :filter="filter"
            class="q-pa-md bg-transparent"
            :class="is_grid_mode ? '': 'my-sticky-header-table'"
            :table-class="$q.dark.isActive ? 'q-px-md q-py-none q-mx-md rounded-10 bg-dark' : 'q-px-md q-py-none q-mx-md rounded-10 bg-white'"
            color="primary"
            table-header-class="text-primary text-uppercase"
            card-container-class="justify-center"
            :grid="is_grid_mode"
            :loading="is_loading_list"
            :no-data-label="$t('shared.error.no_data_found')"
            :no-results-label="$t('shared.error.no_search_results')"
            :loading-label="$t('shared.label.loading')"
            @row-click="() => console.log('click!')"
        >
            <template v-slot:item="props">
                <SupervisorCrewTableItem :row="props.row"/>
            </template>

            <template v-slot:top>
                <div class="row full-width q-mb-sm">
                    <q-btn 
                        push 
                        color="primary" 
                        icon="person_add" 
                        :label="$t('shared.label.add')"
                        class="text-uppercase"
                    />
                    
                    <q-space />
                    
                    <q-btn-toggle 
                        v-model="is_grid_mode"
                        push 
                        color="white" 
                        text-color="primary" 
                        toggle-color="primary" 
                        class="q-mr-md" 
                        :options="[
                            {icon: 'grid_view', value: true},
                            {icon: 'view_list', value: false},
                        ]"
                    />
                    <q-input 
                        v-model="filter"
                        outlined 
                        dense 
                        rounded
                        color="primary" 
                        bg-color="white" 
                        label-color="primary" 
                        :label="$t('shared.label.search')" 
                    >
                        <template v-slot:append>
                            <q-icon 
                                name="search" 
                                color="primary"
                            />
                        </template>
                    </q-input>
                </div>
            </template>

            <!-- Template for custome failed-to-load state -->
            <template v-slot: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>

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

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

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

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