import { renderComponent } from '$lib/components/ui/data-table';
import type { ColumnDef } from '@tanstack/table-core';
import DataTableTagsBadge from './data-table-tags-badge.svelte';
import DataTableHeader from './data-table-header.svelte';

import type { FilterFn } from '@tanstack/table-core';
import { rankItem } from '@tanstack/match-sorter-utils';
import DataTableActions from './data-table-actions.svelte';
import { get } from 'svelte/store';
import { referenceFromPage } from '$lib/core/stores/recipeStore';

const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
	const itemRank = rankItem(row.getValue(columnId), value);
	addMeta({ itemRank });
	return itemRank.passed;
};

export type RecipeOverview = {
	productCode: string;
	name: string;
	description: string;
	tags: string;
	status: 'ready' | 'obsolete' | 'drafted' | 'pending/online' | 'pending/offline';
};

export const columns: ColumnDef<RecipeOverview>[] = [
	{
		accessorKey: 'productCode',
		header: ({ column }) =>
			renderComponent(DataTableHeader, {
				onclick: column.getToggleSortingHandler(),
				data: 'Product Code'
			}),
		enableGlobalFilter: true,
		filterFn: 'includesString'
	},
	{
		accessorKey: 'name',
		header: ({ column }) =>
			renderComponent(DataTableHeader, {
				onclick: column.getToggleSortingHandler(),
				data: 'Name'
			}),
		enableGlobalFilter: true,
		filterFn: 'includesString'
	},
	{
		accessorKey: 'description',
		header: ({ column }) =>
			renderComponent(DataTableHeader, {
				onclick: column.getToggleSortingHandler(),
				data: 'Description'
			}),
		enableGlobalFilter: true,
		filterFn: 'includesString'
	},
	{
		accessorKey: 'tags',
		header: ({ column }) =>
			renderComponent(DataTableHeader, {
				onclick: column.getToggleSortingHandler(),
				data: 'Tags'
			}),
		cell: ({ row }) => {
			return renderComponent(DataTableTagsBadge, { tags: row.original.tags });
		},
		enableGlobalFilter: true,
		filterFn: 'includesString'
	},
	{
		accessorKey: 'status',
		header: ({ column }) =>
			renderComponent(DataTableHeader, {
				onclick: column.getToggleSortingHandler(),
				data: 'Status'
			}),
		cell: ({ row }) => {
			return renderComponent(DataTableTagsBadge, { tags: row.original.status });
		},
		enableGlobalFilter: true,
		filterFn: 'includesString'
	},
	{
		id: 'actions',
		cell: ({ row }) => {
			return renderComponent(DataTableActions, {
				refPage: get(referenceFromPage),
				...row.original
			});
		}
	}
];