<script setup>
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/Components/ui/dialog";
import { Button } from "@/Components/ui/button";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faTrashCan, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
import { ref, watch } from "vue";

const props = defineProps({
  show: { type: Boolean, default: false },
  title: { type: String, default: "Izbriši" },
  message: {
    type: String,
    default: "Ali ste prepričani, da želite izbrisati ta element?",
  },
  confirmText: { type: String, default: "Izbriši" },
  cancelText: { type: String, default: "Prekliči" },
  processing: { type: Boolean, default: false },
  itemName: { type: String, default: null }, // Optional name to show in confirmation
});

const emit = defineEmits(["update:show", "close", "confirm"]);

const open = ref(props.show);

watch(
  () => props.show,
  (newVal) => {
    open.value = newVal;
  }
);

watch(open, (newVal) => {
  emit("update:show", newVal);
  if (!newVal) {
    emit("close");
  }
});

const onClose = () => {
  open.value = false;
};

const onConfirm = () => {
  emit("confirm");
};
</script>

<template>
  <Dialog v-model:open="open">
    <DialogContent class="sm:max-w-md">
      <DialogHeader>
        <DialogTitle>
          <div class="flex items-center gap-2">
            <FontAwesomeIcon :icon="faTrashCan" class="h-5 w-5 text-red-600" />
            <span>{{ title }}</span>
          </div>
        </DialogTitle>
        <DialogDescription>
          <div class="flex items-start gap-4 pt-4">
            <div class="flex-shrink-0">
              <div
                class="flex items-center justify-center h-12 w-12 rounded-full bg-red-100"
              >
                <FontAwesomeIcon
                  :icon="faTriangleExclamation"
                  class="h-6 w-6 text-red-600"
                />
              </div>
            </div>
            <div class="flex-1 space-y-2">
              <p class="text-sm text-gray-700">
                {{ message }}
              </p>
              <p v-if="itemName" class="text-sm font-medium text-gray-900">
                {{ itemName }}
              </p>
              <p class="text-sm text-gray-500">Ta dejanje ni mogoče razveljaviti.</p>
            </div>
          </div>
        </DialogDescription>
      </DialogHeader>

      <DialogFooter>
        <Button variant="outline" @click="onClose" :disabled="processing">
          {{ cancelText }}
        </Button>
        <Button variant="destructive" @click="onConfirm" :disabled="processing">
          {{ confirmText }}
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>
