import type { ColumnDef } from "@tanstack/table-core";
import { renderComponent, renderSnippet } from "$lib/components/ui/data-table/index.js";
import { createRawSnippet } from "svelte";
import DataTableActions from "./data-table-actions.svelte";

export type Country = {
	m3_key: string;
	mex_key: string;
	ame_key: string;
	description_es: string;
	description_en: string;
};

export function createColumns(
	onSuccess: () => void,
	permissions: { canEdit: boolean; canDelete: boolean } = { canEdit: true, canDelete: true }
): ColumnDef<Country>[] {
	return [		
		{
			accessorKey: "m3_key",
			header: "Clave M3",
			cell: ({ row }) => {
				const codeSnippet = 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">${code}</code>`
					};
				});
				return renderSnippet(codeSnippet, { code: row.original.m3_key });
			}
		},
		{
			accessorKey: "mex_key",
			header: "Clave MX",
			cell: ({ row }) => {
				const codeSnippet = 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">${code}</code>`
					};
				});
				return renderSnippet(codeSnippet, { code: row.original.mex_key });
			}
		},
		{
			accessorKey: "ame_key",
			header: "Clave AME",
			cell: ({ row }) => {
				const codeSnippet = 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">${code}</code>`
					};
				});
				return renderSnippet(codeSnippet, { code: row.original.ame_key });
			}
		},
		{
			accessorKey: "description_es",
			header: "Descripción (ES)",
			cell: ({ row }) => {
				const descSnippet = createRawSnippet<[{ description: string }]>((getDesc) => {
					const { description } = getDesc();
					return {
						render: () => `<div class="max-w-[300px] truncate">${description}</div>`
					};
				});
				return renderSnippet(descSnippet, { description: row.original.description_es });
			}
		},
		{
			accessorKey: "description_en",
			header: "Descripción (EN)",
			cell: ({ row }) => {
				const descSnippet = createRawSnippet<[{ description: string }]>((getDesc) => {
					const { description } = getDesc();
					return {
						render: () => `<div class="max-w-[300px] truncate">${description}</div>`
					};
				});
				return renderSnippet(descSnippet, { description: row.original.description_en });
			}
		},
		{
			id: "actions",
			cell: ({ row }) => {
				return renderComponent(DataTableActions, {
					item: row.original,
					onSuccess,
					canEdit: permissions.canEdit,
					canDelete: permissions.canDelete
				});
			}
		}
	];
}

// Legacy export removed
