<script setup lang="ts">
import * as presence from "@zag-js/presence";
import { useMachine, normalizeProps } from "@zag-js/vue";
import { computed, watch, ref } from "vue";

const props = defineProps<{
  present: boolean;
  unmountOnExit?: boolean;
}>();

const emit = defineEmits<{
  (e: "exit-complete"): void;
}>();

const service = useMachine(presence.machine, {
  get present() {
    return props.present;
  },
  onExitComplete: () => emit("exit-complete"),
});

const api = computed(() => presence.connect(service, normalizeProps));

const nodeRef = ref<HTMLElement | null>(null);

watch(nodeRef, () => {
  api.value.setNode(nodeRef.value);
});

const unmount = computed(() => !api.value.present && props.unmountOnExit);
</script>

<template>
  <div
    v-show="!unmount"
    :hidden="!api.present"
    data-scope="presence"
    :data-state="api.skip ? undefined : present ? 'open' : 'closed'"
    ref="nodeRef"
    v-bind="$attrs"
  >
    <slot />
  </div>
</template>
