<script setup>
import { ref } from "vue";
import { Popover, PopoverContent, PopoverTrigger } from "@/Components/ui/popover";

const props = defineProps({
  open: {
    type: Boolean,
    default: undefined,
  },
  align: {
    type: String,
    default: "center",
    validator: (value) => ["start", "center", "end"].includes(value),
  },
  side: {
    type: String,
    default: "bottom",
    validator: (value) => ["top", "right", "bottom", "left"].includes(value),
  },
  sideOffset: {
    type: Number,
    default: 4,
  },
  contentClass: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:open"]);

const internalOpen = ref(false);

const isControlled = props.open !== undefined;

function handleOpenChange(value) {
  if (isControlled) {
    emit("update:open", value);
  } else {
    internalOpen.value = value;
  }
}
</script>

<template>
  <Popover :open="isControlled ? open : internalOpen" @update:open="handleOpenChange">
    <PopoverTrigger as-child :disabled="disabled">
      <slot name="trigger" />
    </PopoverTrigger>
    <PopoverContent
      :align="align"
      :side="side"
      :side-offset="sideOffset"
      :class="contentClass"
    >
      <slot />
    </PopoverContent>
  </Popover>
</template>
