import type { MRT_ColumnDef } from 'mantine-react-table';
import { useMemo } from 'react';

export function BookmarkColumns(groups: any) {
	const columns = useMemo<MRT_ColumnDef<any>[]>(
		() => [
			{
				accessorFn: (row) => {
					if (row.id) {
						return `${row.id}`;
					}
					return '';
				},
				enableEditing: false,
				id: 'id',
				header: 'ID',
				size: 50,
				Cell: ({ renderedCellValue }) => renderedCellValue,
				Header: ({ column }) => column.columnDef.header,
			},
			{
				accessorFn: (row) => {
					if (row.name) {
						return `${row.name}`;
					}
					return '';
				},
				id: 'name',
				header: 'Name',
				Cell: ({ renderedCellValue }) => renderedCellValue,
				Header: ({ column }) => column.columnDef.header,
			},
			{
				accessorFn: (row) => {
					if (row.url) {
						return `${row.url}`;
					}
					return '';
				},
				id: 'url',
				header: 'Url',
				Cell: ({ renderedCellValue }) => renderedCellValue,
				Header: ({ column }) => column.columnDef.header,
			},
			{
				accessorFn: (row) => {
					if (row.category) {
						return `${row.category}`;
					}
					return '';
				},
				id: 'category',
				header: 'Category',
				editVariant: 'select',
				mantineEditSelectProps: { data: groups },
				Cell: ({ renderedCellValue }) => renderedCellValue,
				Header: ({ column }) => column.columnDef.header,
			},
		],
		[groups],
	);

	return columns;
}