<script lang="ts">
	import { Button } from "$lib/components/ui/button";
	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
	import type { Port } from "$lib/api/dashboard/a76/general_catalogs/ports";
	import { EllipsisVertical, Pencil, Trash2 } from 'lucide-svelte';
	import CreateEditDialog from "./create-edit-dialog.svelte";
	import DeleteDialog from "./delete-dialog.svelte";

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

	let editDialogOpen = $state(false);
	let deleteDialogOpen = $state(false);
</script>

{#if canEdit || canDelete}
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			{#snippet child({ props })}
				<Button {...props} variant="ghost" size="icon" class="h-8 w-8 p-0">
					<span class="sr-only">Abrir menú</span>
					<EllipsisVertical class="h-4 w-4" />
				</Button>
			{/snippet}
		</DropdownMenu.Trigger>
		<DropdownMenu.Content align="end">
			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
			{#if canEdit}
				<DropdownMenu.Item onclick={() => editDialogOpen = true}>
					<Pencil class="mr-2 h-4 w-4" />
					Editar
				</DropdownMenu.Item>
			{/if}
			{#if canDelete}
				<DropdownMenu.Item onclick={() => deleteDialogOpen = true} class="text-destructive">
					<Trash2 class="mr-2 h-4 w-4" />
					Eliminar
				</DropdownMenu.Item>
			{/if}
		</DropdownMenu.Content>
	</DropdownMenu.Root>
{/if}

{#if canEdit}
	<CreateEditDialog 
		bind:open={editDialogOpen} 
		mode="edit" 
		{item} 
		{onSuccess} 
	/>
{/if}

{#if canDelete}
	<DeleteDialog 
		bind:open={deleteDialogOpen} 
		{item} 
		{onSuccess} 
	/>
{/if}
