<script setup>
import { computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';

import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { useAcl } from 'src/composables/useAcl';

import VnTable from 'components/VnTable/VnTable.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import WorkerSummary from './Card/WorkerSummary.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import WorkerManagementFilter from './WorkerManagementFilter.vue';

const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const dataKey = 'ManagementList';

const columns = computed(() => [
    {
        align: 'left',
        label: t('tableColumns.firstName'),
        name: 'firstName',
        isTitle: true,
        columnFilter: {
            name: 'firstName',
        },
    },
    {
        align: 'left',
        label: t('tableColumns.lastName'),
        name: 'lastName',
        columnFilter: {
            name: 'lastName',
        },
    },
    {
        align: 'left',
        label: t('management.NIF'),
        name: 'fi',
        columnFilter: {
            name: 'fi',
        },
        cardVisible: true,
    },
    {
        align: 'left',
        label: t('tableColumns.email'),
        name: 'email',
        columnFilter: {
            name: 'email',
        },
        cardVisible: true,
    },
    {
        align: 'left',
        label: t('management.ssn'),
        labelAbbreviation: t('management.ssn'),
        toolTip: t('management.completeSsn'),
        name: 'SSN',
        columnFilter: {
            name: 'SSN',
        },
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'departmentFk',
        label: t('tableColumns.department'),
        columnFilter: {
            component: 'select',
            name: 'departmentFk',
            attrs: {
                url: 'Departments',
            },
        },
        cardVisible: true,
        format: (row, dashIfEmpty) => dashIfEmpty(row.department),
    },
    {
        align: 'right',
        label: '',
        name: 'tableActions',
        actions: [
            {
                title: t('globals.pageTitles.summary'),
                icon: 'preview',
                action: (row) => viewSummary(row?.id, WorkerSummary),
                isPrimary: true,
            },
        ],
    },
]);

onMounted(() => {
    const canAccess = useAcl().hasAcl('Worker', 'management', 'WRITE');
});
</script>
<template>
    <VnSearchbar
        :data-key
        url="Workers/filter"
        :label="t('management.search')"
        :info="t('management.searchInfo')"
    />
    <RightMenu>
        <template #right-panel>
            <WorkerManagementFilter :data-key />
        </template>
    </RightMenu>
    <VnTable
        ref="tableRef"
        url="Workers/filter"
        :columns="columns"
        :data-key
        :right-search="false"
        order="id DESC"
    />
</template>
