import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
import { Transition, ref } from "vue";
import { acceleratedEasing, deceleratedEasing, nullifyTransforms } from "@veno-ui/utils";
import { defineComponent } from "../../utils";
import { useSharedClick } from "../../composables/shared-click";
const DialogTransition = defineComponent({
  name: "VeDialogTransition",
  props: {
    target: Object
  },
  setup(props, {
    slots
  }) {
    const {
      clickedEl
    } = useSharedClick();
    const targetEl = ref();
    const getTransformOrigin = (el) => {
      if (targetEl.value && document.documentElement.contains(targetEl.value)) {
        const {
          x,
          y
        } = getDimensions(targetEl.value, el);
        return `${x}px ${y}px`;
      }
      return "center";
    };
    const functions = {
      onBeforeEnter(el) {
        el.style.pointerEvents = "none";
      },
      async onEnter(el, done) {
        await new Promise((resolve) => requestAnimationFrame(resolve));
        targetEl.value = props.target ?? clickedEl.value;
        el.style.transformOrigin = getTransformOrigin(el);
        el.animate([{
          transform: "scale(0.5)",
          opacity: 0
        }, {
          transform: ""
        }], {
          duration: 225,
          easing: deceleratedEasing
        }).finished.then(() => done());
      },
      onAfterEnter(el) {
        el.style.removeProperty("pointer-events");
        el.style.removeProperty("transform-origin");
      },
      onBeforeLeave(el) {
        el.style.pointerEvents = "none";
      },
      async onLeave(el, done) {
        await new Promise((resolve) => requestAnimationFrame(resolve));
        el.style.transformOrigin = getTransformOrigin(el);
        el.animate([{
          transform: ""
        }, {
          transform: "scale(0.5)",
          opacity: 0
        }], {
          duration: 125,
          easing: acceleratedEasing
        }).finished.then(() => done());
      },
      onAfterLeave(el) {
        el.style.removeProperty("pointer-events");
        el.style.removeProperty("transform-origin");
      }
    };
    return () => {
      return _createVNode(Transition, _mergeProps({
        "name": "dialog-transition"
      }, functions, {
        "css": false
      }), slots);
    };
  }
});
function getDimensions(target, el) {
  const targetBox = target.getBoundingClientRect();
  const elBox = nullifyTransforms(el);
  const [anchorSide, anchorOffset] = getComputedStyle(el).getPropertyValue("--ve-overlay-anchor-origin").split(" ");
  let offsetX = targetBox.left + targetBox.width / 2;
  if (anchorSide === "left" || anchorOffset === "left") {
    offsetX -= targetBox.width / 2;
  } else if (anchorSide === "right" || anchorOffset === "right") {
    offsetX += targetBox.width / 2;
  }
  let offsetY = targetBox.top + targetBox.height / 2;
  if (anchorSide === "top" || anchorOffset === "top") {
    offsetY -= targetBox.height / 2;
  } else if (anchorSide === "bottom" || anchorOffset === "bottom") {
    offsetY += targetBox.height / 2;
  }
  return {
    x: offsetX - elBox.left,
    y: offsetY - elBox.top
  };
}
export {
  DialogTransition
};
//# sourceMappingURL=dialog-transition.mjs.map
