<template>
<div>

<IndexSettingsModal 
    id="indexSettingsModal"
    :left-column="settings.employeesIndexColumnsSelected"
    :right-column="columnsNotSelected"

    @update-columns-selected="updateColumnsSelected"
/>
<IndexControls />

<SimpleSearch 
    :columns="settings.employeesIndexColumnsSelected"
    @search="store.setSimpleSearch($event)"
/>

<table class="table table-hover mt-3 ">
    <thead>
        <tr>
            <th 
                v-for="(col, index) in settings.employeesIndexColumnsSelected"
                @click="onSortBy(col)"
            >
                {{ col }} <i :style="styleColSelected(col)" class="bi" :class="iconSort"></i>
            </th>
            <th>
                <button @click.stop data-bs-toggle="modal" data-bs-target="#indexSettingsModal" class="btn m-0 p-0 btn-sm">
                    <i class="bi bi-gear-fill"></i>
                </button> 
            </th>
        </tr>
    </thead>
    <transition-group name="list" tag="tbody" mode="out-in">
        <tr v-for="employee in store.state.rows" :key="employee.id" @click="router.push({name: 'Employees/Details', params: {id: employee.id}})">
            <td v-for="col in settings.employeesIndexColumnsSelected">
                {{ employee[col] }}       
            </td>
            <td>

            </td>
        </tr>
    </transition-group>
</table>

<h5 v-show="store.state.rows.length === 0" class="text-muted">Keine Daten anzuzeigen...</h5>

<VPaginator 
    :radius="1" 
    :page="store.state.page" 
    :first-page="store.state.meta.first_page" 
    :last-page="store.state.meta.last_page"
    @set-page="paginatorSetPage" 
/>
</div>
</template>

<script setup lang="ts">
import SimpleSearch from '@/components/Employees/SimpleSearch.vue';
import IndexSettingsModal from '@/components/Employees/IndexSettingsModal.vue';
import IndexControls from '@/components/Employees/IndexControls.vue';
import VPaginator from '@/components/VPaginator.vue';
import { onMounted, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import useEmployees from '@/stores/employees'
import { useSettings } from '@/stores/settings';
import _difference from 'lodash/difference'

const store = useEmployees()
const router = useRouter()
const settingsStore = useSettings()

const { settings } = storeToRefs(settingsStore)

const sort_by = reactive({
    asc: true,
    column: 'id'
})

onMounted(async () =>{
    console.log("Employees Index onMounted")
    await store.fetchFromApi()
    await settingsStore.fetchFromApi()
})

const columnsNotSelected = computed(() => {
    return _difference(store.state.columns, settings.value.employeesIndexColumnsSelected)
})

function styleColSelected(col : string) : {visibility: 'visible' | 'hidden'} {    
    return {
        visibility: sort_by.column === col ? 'visible' : 'hidden'
    }
}

function updateColumnsSelected(arr: string[]) {
    settings.value.employeesIndexColumnsSelected = arr
    settingsStore.persist()
}

function onSortBy(col : string) {
    if(col !== sort_by.column) sort_by.asc = true
    else sort_by.asc = !sort_by.asc

    sort_by.column = col
    store.state.sort_by = (sort_by.asc ? 'asc(' : 'desc(') + sort_by.column + ')'
}

const iconSort = computed(() => {
    return 'bi-sort-' + (sort_by.asc ? 'down' : 'up')+'-alt'
})

function paginatorSetPage(e : number){
    store.setPage(e)
}

</script>

<style lang="scss" scoped>

.list- {
    &enter-active,
    &leave-active {
        transition: all .2s ease
    }

    &enter-from,
    &leave-to {
        opacity: 0;
    }

    &move {
        transition: all .2s ease
    }
}

table thead tr:first-child th:first-child {
    min-width: 51px;
}

table th {
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    user-select: none;
    cursor: pointer;
    
}

tr {
    cursor: pointer;
}

</style>