<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 { faPenToSquare } from "@fortawesome/free-solid-svg-icons";
import { computed, ref, watch, nextTick } from "vue";

const props = defineProps({
  show: { type: Boolean, default: false },
  title: { type: String, default: "Uredi" },
  maxWidth: { type: String, default: "2xl" },
  confirmText: { type: String, default: "Shrani" },
  cancelText: { type: String, default: "Prekliči" },
  processing: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
});

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

const open = ref(props.show);

watch(
  () => props.show,
  (newVal) => {
    open.value = newVal;
    if (newVal) {
      // Emit custom event when dialog opens
      nextTick(() => {
        window.dispatchEvent(new CustomEvent("dialog:open"));
      });
    }
  }
);

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

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

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

const maxWidthClass = computed(() => {
  const maxWidthMap = {
    sm: "sm:max-w-sm",
    md: "sm:max-w-md",
    lg: "sm:max-w-lg",
    xl: "sm:max-w-xl",
    "2xl": "sm:max-w-2xl",
    wide: "sm:max-w-[1200px]",
  };
  return maxWidthMap[props.maxWidth] || "sm:max-w-2xl";
});
</script>

<template>
  <Dialog v-model:open="open">
    <DialogContent class="overflow-auto max-h-3/4" :class="maxWidthClass">
      <DialogHeader>
        <DialogTitle>
          <div class="flex items-center gap-2">
            <FontAwesomeIcon :icon="faPenToSquare" class="h-5 w-5 text-primary" />
            <span>{{ title }}</span>
          </div>
        </DialogTitle>
        <DialogDescription>
          <slot name="description" />
        </DialogDescription>
      </DialogHeader>

      <div class="py-4">
        <slot />
      </div>

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