import type { InjectionKey, ComputedRef } from "vue";
import type * as dialogMachine from "@zag-js/dialog";

type AlertDialogApi = ComputedRef<ReturnType<typeof dialogMachine.connect>>;

const AlertDialogApiKey: InjectionKey<AlertDialogApi> = Symbol("alert-dialog-api");

export { AlertDialogApiKey };
export type { AlertDialogApi };
 

<script setup lang="ts">
import { computed, provide, useAttrs, useId } from "vue";
import { useMachine, normalizeProps } from "@zag-js/vue";
import * as dialogMachine from "@zag-js/dialog";
import { AlertDialogApiKey } from "./context";

defineOptions({ inheritAttrs: false });
const rawAttrs = useAttrs() as Partial<dialogMachine.Props>;
const id = useId();

const service = useMachine(
  dialogMachine.machine,
  computed(() => ({
    id,
    role: "alertdialog",
    // An alert dialog demands an explicit choice - dismissing it by clicking
    // outside or pressing Escape would let the user skip that choice.
    closeOnInteractOutside: false,
    closeOnEscape: false,
    ...rawAttrs,
  }))
);
const api = computed(() => dialogMachine.connect(service, normalizeProps));

provide(AlertDialogApiKey, api);
</script>

<template>
  <slot />
</template>
 

<script setup lang="ts">
import { inject } from "vue";
import Button from "@/components/ui/button.vue";
import { AlertDialogApiKey } from "./context";

defineProps<{ class?: string }>();

const injectedApi = inject(AlertDialogApiKey);
if (!injectedApi)
  throw new Error("AlertDialog parts must be used within <AlertDialogRoot>");
const api = injectedApi;
</script>

<template>
  <Button v-bind="api.getTriggerProps()" :class="$props.class">
    <slot />
  </Button>
</template>
 

<script setup lang="ts">
import { inject } from "vue";
import { twMerge } from "tailwind-merge";
import Portal from "@/components/ui/portal.vue";
import { usePresence } from "@/components/ui/presence";
import { AlertDialogApiKey } from "./context";

const { class: className } = defineProps<{ class?: string }>();

const injectedApi = inject(AlertDialogApiKey);
if (!injectedApi)
  throw new Error("AlertDialog parts must be used within <AlertDialogRoot>");
const api = injectedApi;

const backdrop = usePresence(() => api.value.open);
const content = usePresence(() => api.value.open);
</script>

<template>
  <Portal>
    <div
      v-bind="api.getBackdropProps()"
      :ref="backdrop.setNode"
      :hidden="!backdrop.present.value"
      class="fixed inset-0 bg-background/80 z-50 [&[data-state='open']]:animate-in [&[data-state='open']]:fade-in-0 [&[data-state='closed']]:animate-out [&[data-state='closed']]:fade-out-0"
    />
    <div v-bind="api.getPositionerProps()">
      <div
        v-bind="api.getContentProps()"
        :ref="content.setNode"
        :hidden="!content.present.value"
        :class="
          twMerge([
            `outline-none fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg p-6 border border-primary/30 bg-background`,
            `[&[data-state='open']]:animate-in [&[data-state='open']]:fade-in-0 [&[data-state='open']]:zoom-in-80 [&[data-state='open']]:duration-250`,
            `[&[data-state='closed']]:animate-out [&[data-state='closed']]:fade-out-0 [&[data-state='closed']]:zoom-out-80 [&[data-state='closed']]:duration-400`,
            className,
          ])
        "
      >
        <slot />
      </div>
    </div>
  </Portal>
</template>
 

<script setup lang="ts">
import { inject } from "vue";
import { twMerge } from "tailwind-merge";
import { AlertDialogApiKey } from "./context";

const { class: className } = defineProps<{ class?: string }>();

const injectedApi = inject(AlertDialogApiKey);
if (!injectedApi)
  throw new Error("AlertDialog parts must be used within <AlertDialogRoot>");
const api = injectedApi;
</script>

<template>
  <div v-bind="api.getTitleProps()" :class="twMerge(['font-bold text-lg', className])">
    <slot />
  </div>
</template>
 

<script setup lang="ts">
import { inject } from "vue";
import { twMerge } from "tailwind-merge";
import { AlertDialogApiKey } from "./context";

const { class: className } = defineProps<{ class?: string }>();

const injectedApi = inject(AlertDialogApiKey);
if (!injectedApi)
  throw new Error("AlertDialog parts must be used within <AlertDialogRoot>");
const api = injectedApi;
</script>

<template>
  <div v-bind="api.getDescriptionProps()" :class="twMerge(['opacity-80 py-2', className])">
    <slot />
  </div>
</template>
 

<script setup lang="ts">
import { inject } from "vue";
import Button from "@/components/ui/button.vue";
import { AlertDialogApiKey } from "./context";

defineProps<{ class?: string }>();

const injectedApi = inject(AlertDialogApiKey);
if (!injectedApi)
  throw new Error("AlertDialog parts must be used within <AlertDialogRoot>");
const api = injectedApi;
</script>

<template>
  <Button shape="flat" v-bind="api.getCloseTriggerProps()" :class="$props.class">
    <slot />
  </Button>
</template>
 

<script setup lang="ts">
import { computed, inject } from "vue";
import Button from "@/components/ui/button.vue";
import { AlertDialogApiKey } from "./context";

defineProps<{ class?: string }>();
// Declaring this as an emit (rather than leaving @click to fall through as a
// plain DOM attribute) means it composes cleanly with the machine's own
// close handler below instead of both landing on the button and firing
// twice.
const emit = defineEmits<{ click: [event: MouseEvent] }>();

const injectedApi = inject(AlertDialogApiKey);
if (!injectedApi)
  throw new Error("AlertDialog parts must be used within <AlertDialogRoot>");
const api = injectedApi;

// The consumer's handler runs first (it does the actual delete/confirm
// action); the machine's own onClick then closes the dialog, unless that
// handler called event.preventDefault() to keep it open.
const triggerProps = computed(() => {
  const { onClick, ...rest } = api.value.getCloseTriggerProps();
  return {
    ...rest,
    onClick: (event: MouseEvent) => {
      emit("click", event);
      onClick?.(event);
    },
  };
});
</script>

<template>
  <Button variant="destructive" v-bind="triggerProps" :class="$props.class">
    <slot />
  </Button>
</template>
 

export { default as AlertDialogRoot } from "./AlertDialogRoot.vue";
export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue";
export { default as AlertDialogContent } from "./AlertDialogContent.vue";
export { default as AlertDialogTitle } from "./AlertDialogTitle.vue";
export { default as AlertDialogDescription } from "./AlertDialogDescription.vue";
export { default as AlertDialogCancel } from "./AlertDialogCancel.vue";
export { default as AlertDialogAction } from "./AlertDialogAction.vue";