import DataTableActions from '@/components/admin/system/roles/data-table-actions.vue';
import { DataTableColumnHeader } from '@/components/data-table';
import type { ColumnDef } from '@tanstack/vue-table';
import { h } from 'vue';

export interface RoleListItem {
    id: number;
    name: string;
    permissions_count: number;
}

export function createColumns(): ColumnDef<RoleListItem>[] {
    return [
        {
            accessorKey: 'name',
            enableSorting: true,
            header: () =>
                h(DataTableColumnHeader, { title: 'Nama', column: 'name' }),
            cell: ({ row }) => {
                const name = row.original.name;
                const formattedName = name
                    .split('-')
                    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
                    .join(' ');

                return h('div', { class: 'flex flex-col' }, [
                    h(
                        'span',
                        { class: 'font-medium text-foreground' },
                        formattedName,
                    ),
                    h(
                        'span',
                        { class: 'text-xs text-muted-foreground font-mono' },
                        name,
                    ),
                ]);
            },
        },
        {
            accessorKey: 'permissions_count',
            enableSorting: false,
            header: 'Jumlah Hak Akses',
            cell: ({ row }) => {
                return h(
                    'span',
                    { class: 'text-sm' },
                    `${row.original.permissions_count} hak akses`,
                );
            },
        },
        {
            id: 'actions',
            enableSorting: false,
            enableHiding: false,
            cell: ({ row }) =>
                h(DataTableActions, {
                    role: row.original,
                }),
        },
    ];
}