<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
import { Pencil } from '@lucide/vue';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';

const props = defineProps<{
    href?: string;
    tooltip?: string;
    tooltipClass?: string;
    buttonClass?: string;
    disabled?: boolean;
}>();

const emit = defineEmits<{
    click: [];
}>();

function handleClick(event: MouseEvent) {
    if (props.disabled) {
        event.preventDefault();

        return;
    }

    if (!props.href) {
        event.preventDefault();
        emit('click');
    }
}
</script>

<template>
    <Tooltip>
        <TooltipTrigger as-child>
            <span class="inline-flex">
                <Button
                    v-if="href"
                    variant="ghost"
                    size="icon"
                    as-child
                    class="size-8 edit-btn"
                    :class="cn(buttonClass, disabled && 'opacity-50')"
                >
                    <Link
                        :href="href"
                        :tabindex="disabled ? -1 : undefined"
                        :aria-disabled="disabled || undefined"
                        :class="disabled ? 'cursor-not-allowed' : undefined"
                        @click="handleClick"
                    >
                        <Pencil class="size-4" />
                        <span class="sr-only">{{ tooltip || 'Ubah' }}</span>
                    </Link>
                </Button>
                <Button
                    v-else
                    variant="ghost"
                    size="icon"
                    class="size-8 edit-btn"
                    :class="buttonClass"
                    :disabled="disabled"
                    @click="handleClick"
                >
                    <Pencil class="size-4" />
                    <span class="sr-only">{{ tooltip || 'Ubah' }}</span>
                </Button>
            </span>
        </TooltipTrigger>
        <TooltipContent :class="tooltipClass">{{ tooltip || 'Ubah' }}</TooltipContent>
    </Tooltip>
</template>
