<script setup lang="ts">
    import { Button } from '@/components/ui/button';
    import {
        DropdownMenu,
        DropdownMenuContent,
        DropdownMenuItem,
        DropdownMenuLabel,
        DropdownMenuSeparator,
        DropdownMenuTrigger,
    } from '@/components/ui/dropdown-menu';
    import { MoreHorizontal } from 'lucide-vue-next';
    import {
        AlertDialog,
        AlertDialogTrigger,
        AlertDialogContent,
        AlertDialogHeader,
        AlertDialogTitle,
        AlertDialogDescription,
        AlertDialogFooter,
        AlertDialogCancel,
        AlertDialogAction,
    } from '@/components/ui/alert-dialog';
    import { Link } from '@inertiajs/vue3';

    defineProps<{
        workHour: {
            id: number
        }
    }>();

    function copy(id: string) {
        navigator.clipboard.writeText(id);
    }
</script>

<template>
    <DropdownMenu>
      <DropdownMenuTrigger as-child>
        <Button variant="ghost" class="w-8 h-8 p-0">
          <span class="sr-only">Åpne meny</span>
          <MoreHorizontal class="w-4 h-4" />
        </Button>
      </DropdownMenuTrigger>    
      <DropdownMenuContent align="end">
        <DropdownMenuLabel>Handlinger</DropdownMenuLabel>   
        <DropdownMenuItem @click="copy(workHour.id)">
          Kopier ID
        </DropdownMenuItem> 
        <DropdownMenuSeparator />   
        <DropdownMenuItem as-child>
          <Link :href="route('smartdok.work-hours.show', workHour.id)">
            Vis arbeidstime(r)
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem as-child>
          <Link :href="route('smartdok.work-hours.edit', workHour.id)">
            Rediger
          </Link>
        </DropdownMenuItem>

        <DropdownMenuSeparator />

        <AlertDialog>
            <AlertDialogTrigger asChild>
                <DropdownMenuItem
                    className="text-red-600 rounded-sm hover:!bg-zinc-800 cursor-pointer flex items-center py-1 px-2"
                    :onSelect="(e) => e.preventDefault()"
                >Slett</DropdownMenuItem>
            </AlertDialogTrigger>

            <!-- Confirmation dialog -->
            <AlertDialogContent>
                <AlertDialogHeader>
                    <AlertDialogTitle>Er du sikker på at du vil slette denne arbeidstime oppføringen?</AlertDialogTitle>
                    <AlertDialogDescription>
                    Denne handlingen kan ikke angres.
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                    <AlertDialogCancel>Avbryt</AlertDialogCancel>
                    <AlertDialogAction as-child>
                        <Link
                            method="delete"
                            :href="route('smartdok.work-hours.destroy', workHour.id)"
                            class="text-red-600"
                            as="button"
                        >
                            Slett
                        </Link>
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
      </DropdownMenuContent>
    </DropdownMenu>
</template>
