<script lang="ts">
	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
	import Copy from "@lucide/svelte/icons/copy";
	import Eye from "@lucide/svelte/icons/eye";
	import Pencil from "@lucide/svelte/icons/pencil";
	import Trash2 from "@lucide/svelte/icons/trash-2";
	import { Button } from "$lib/components/ui/button/index.js";
	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
	import type { Country } from "./columns.js";
	import DetailsDialog from "./details-dialog.svelte";

	let { 
		item,
		onSuccess,
		canEdit = true,
		canDelete = true
	}: { 
		item: Country;
		onSuccess?: () => void;
		canEdit?: boolean;
		canDelete?: boolean;
	} = $props();

	let showDetailsDialog = $state(false);

	function handleCopyId() {
		navigator.clipboard.writeText(item.m3_key.toString());
	}
</script>

<DropdownMenu.Root>
	<DropdownMenu.Trigger>
		{#snippet child({ props })}
			<Button {...props} variant="ghost" size="icon" class="relative size-8 p-0">
				<span class="sr-only">Abrir menú</span>
				<EllipsisIcon class="size-4" />
			</Button>
		{/snippet}
	</DropdownMenu.Trigger>
	<DropdownMenu.Content align="end">
		<DropdownMenu.Group>
			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
			<DropdownMenu.Item onclick={handleCopyId}>
				<Copy class="mr-2 size-4" />
				Copiar Clave M3
			</DropdownMenu.Item>
			<DropdownMenu.Item onclick={() => (showDetailsDialog = true)}>
				<Eye class="mr-2 size-4" />
				Ver detalles
			</DropdownMenu.Item>
		</DropdownMenu.Group>

		{#if canEdit || canDelete}
			<DropdownMenu.Separator />
			<DropdownMenu.Group>
				{#if canEdit}
					<DropdownMenu.Item onclick={() => (alert('Módulo de edición no disponible para Catálogos Públicos'))}>
						<Pencil class="mr-2 size-4" />
						Editar
					</DropdownMenu.Item>
				{/if}
				{#if canDelete}
					<DropdownMenu.Item onclick={() => (alert('Módulo de eliminación no disponible para Catálogos Públicos'))} class="text-destructive">
						<Trash2 class="mr-2 size-4" />
						Eliminar
					</DropdownMenu.Item>
				{/if}
			</DropdownMenu.Group>
		{/if}
	</DropdownMenu.Content>
</DropdownMenu.Root>

<!-- Dialogs -->
<DetailsDialog bind:open={showDetailsDialog} {item} />
