import type { ColumnDef } from '@tanstack/table-core';
import { renderSnippet } from '$lib/components/ui/data-table/index.js';
import { createRawSnippet } from 'svelte';
import type { DocumentTypeDigitization } from '$lib/api/dashboard/reference_data/document_types_digitization';

export function createColumns(): ColumnDef<DocumentTypeDigitization>[] {
	return [
		{
			accessorKey: 'code',
			header: 'Código',
			cell: ({ row }) => {
				const keySnippet = createRawSnippet<[{ code: string }]>((getCode) => {
					const { code } = getCode();
					return {
						render: () =>
							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${code}</code>`
					};
				});

				return renderSnippet(keySnippet, { code: row.original.code });
			}
		},
		{
			accessorKey: 'description',
			header: 'Descripción',
			cell: ({ row }) => {
				const descriptionSnippet = createRawSnippet<[{ description: string }]>((getDescription) => {
					const { description } = getDescription();
					return {
						render: () => `<div class="max-w-[720px] whitespace-normal">${description}</div>`
					};
				});

				return renderSnippet(descriptionSnippet, { description: row.original.description });
			}
		},
		{
			accessorKey: 'active',
			header: 'Estatus',
			cell: ({ row }) => {
				const activeSnippet = createRawSnippet<[{ active: boolean }]>((getActive) => {
					const { active } = getActive();
					const className = active
						? 'border-emerald-200 bg-emerald-50 text-emerald-700'
						: 'border-slate-200 bg-slate-50 text-slate-600';
					const label = active ? 'Activo' : 'Inactivo';
					return {
						render: () =>
							`<span class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium ${className}">${label}</span>`
					};
				});

				return renderSnippet(activeSnippet, { active: row.original.active });
			}
		}
	];
}

export const columns = createColumns();