<script>
import theme from "#build/b24ui/prose/img";
</script>

<script setup>
import { ref, computed, useId } from "vue";
import { DialogRoot, DialogPortal, DialogTrigger } from "reka-ui";
import { AnimatePresence, Motion } from "motion-v";
import { useEventListener, createReusableTemplate } from "@vueuse/core";
import { useAppConfig } from "#imports";
import ImageComponent from "#build/b24ui-image-component";
import { tv } from "../../utils/tv";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  src: { type: String, required: true },
  alt: { type: String, required: true },
  width: { type: [String, Number], required: false },
  height: { type: [String, Number], required: false },
  zoom: { type: Boolean, required: false, default: true },
  class: { type: null, required: false },
  b24ui: { type: null, required: false }
});
const appConfig = useAppConfig();
const [DefineImageTemplate, ReuseImageTemplate] = createReusableTemplate();
const [DefineZoomedImageTemplate, ReuseZoomedImageTemplate] = createReusableTemplate();
const open = ref(false);
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.img || {} })({
  zoom: props.zoom,
  open: open.value
}));
const refinedSrc = computed(() => {
  return props.src;
});
const layoutId = computed(() => `${refinedSrc.value}::${useId()}`);
if (props.zoom) {
  useEventListener(window, "scroll", () => {
    open.value = false;
  });
}
</script>

<template>
  <DefineImageTemplate>
    <component
      :is="ImageComponent"
      :src="refinedSrc"
      :alt="alt"
      :width="width"
      :height="height"
      v-bind="$attrs"
      data-slot="base"
      :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
    />
  </DefineImageTemplate>

  <DefineZoomedImageTemplate>
    <component
      :is="ImageComponent"
      :src="refinedSrc"
      :alt="alt"
      v-bind="$attrs"
      data-slot="zoomedImage"
      :class="b24ui.zoomedImage({ class: [props.b24ui?.zoomedImage] })"
    />
  </DefineZoomedImageTemplate>

  <DialogRoot
    v-if="zoom"
    v-slot="{ close }"
    v-model:open="open"
    :modal="false"
  >
    <DialogTrigger as-child>
      <Motion :layout-id="layoutId" as-child :transition="{ type: 'spring', bounce: 0.15, duration: 0.5, ease: 'easeInOut' }">
        <ReuseImageTemplate />
      </Motion>
    </DialogTrigger>

    <DialogPortal>
      <AnimatePresence>
        <Motion
          v-if="open"
          :initial="{ opacity: 0 }"
          :animate="{ opacity: 1 }"
          :exit="{ opacity: 0 }"
          data-slot="overlay"
          :class="b24ui.overlay({ class: [props.b24ui?.overlay] })"
        />

        <div
          v-if="open"
          data-slot="content"
          :class="b24ui.content({ class: [props.b24ui?.content] })"
          @click="close"
        >
          <Motion as-child :layout-id="layoutId" :transition="{ type: 'spring', bounce: 0.15, duration: 0.5, ease: 'easeInOut' }">
            <ReuseZoomedImageTemplate />
          </Motion>
        </div>
      </AnimatePresence>
    </DialogPortal>
  </DialogRoot>

  <ReuseImageTemplate v-else />
</template>
