import { ref, computed, watch, toHandlers, createVNode, Fragment, mergeProps, Teleport, withDirectives, vShow, resolveDirective } from "vue";
import "./styles/overlay.scss";
import { makeActivatorProps, useActivator } from "../../composables/activator/index.mjs";
import { makePositionStrategyProps, usePositionStrategy } from "../../composables/position-strategy/index.mjs";
import { makeScrollStrategyProps, useScrollStrategy } from "../../composables/scroll-strategy/index.mjs";
import { makeThemeProps, provideTheme } from "../../composables/theme/index.mjs";
import { makeTransitionProps, MaybeTransition } from "../../composables/transition/index.mjs";
import { useBackButton } from "../../composables/router/index.mjs";
import { useProxiedModel } from "../../composables/proxied-model/index.mjs";
import { useTeleport } from "../../composables/teleport/index.mjs";
import { makeDimensionProps, useDimension } from "../../composables/dimension/index.mjs";
import { makeLazyProps, useLazy } from "../../composables/lazy/index.mjs";
import { useStack } from "../../composables/stack/index.mjs";
import { ClickOutside } from "../../directives/click-outside/index.mjs";
import { FadeTransition } from "../transition/fade-transition.mjs";
import { useOverlay } from "../../composables/layout/overlay.mjs";
import { Scrim } from "../scrim/scrim.mjs";
import { propsFactory, IN_BROWSER, getScrollParent, useRender, convertToUnit, standardEasing, keyValues } from "../../utils/dist/index.mjs";
import { genericComponent } from "../../utils/define-component.mjs";
const makeOverlayProps = propsFactory({
  modelValue: Boolean,
  absolute: Boolean,
  attach: [Boolean, String, Object],
  contained: Boolean,
  contentStyle: null,
  contentClass: null,
  noClickAnimation: Boolean,
  persistent: Boolean,
  scrim: {
    type: [String, Boolean],
    default: true
  },
  ...makeActivatorProps(),
  ...makeDimensionProps(),
  ...makePositionStrategyProps(),
  ...makeScrollStrategyProps(),
  ...makeThemeProps(),
  ...makeTransitionProps({
    transition: {
      component: FadeTransition
    }
  }),
  ...makeLazyProps()
}, "overlay");
const Overlay = genericComponent()({
  name: "VeOverlay",
  inheritAttrs: false,
  directives: {
    ClickOutside
  },
  props: makeOverlayProps(),
  emits: {
    "click:outside": (_event) => true,
    "update:modelValue": (_modelValue) => true
  },
  setup(props, {
    slots,
    attrs,
    emit
  }) {
    const isActive = useProxiedModel(props, "modelValue");
    const isInternalActive = ref(isActive.value);
    const {
      teleportTarget
    } = useTeleport(computed(() => props.attach || props.contained));
    const {
      themeClasses
    } = provideTheme(props);
    const {
      hasContent,
      onAfterLeave: onAfterLeaveByLazy
    } = useLazy(props, isActive);
    const {
      dimensionStyles
    } = useDimension(props);
    const {
      isTop
    } = useStack(isActive);
    const root = ref();
    const contentEl = ref();
    const {
      overlayZIndex
    } = useOverlay(isInternalActive);
    const {
      activatedPosition,
      activatorEl,
      activatorRef,
      activatorEvents,
      contentEvents
    } = useActivator(props, {
      isActive
    });
    const {
      contentStyles,
      anchorClasses,
      updatePosition
    } = usePositionStrategy(props, {
      activatedPosition,
      activatorEl,
      contentEl,
      isActive
    });
    useScrollStrategy(props, {
      root,
      contentEl,
      activatorEl,
      isActive: isInternalActive,
      updatePosition
    });
    const animateClick = () => {
      var _a;
      if (props.noClickAnimation)
        return;
      (_a = contentEl.value) == null ? void 0 : _a.animate([{
        transformOrigin: "center"
      }, {
        transform: "scale(1.03)"
      }, {
        transformOrigin: "center"
      }], {
        duration: 150,
        easing: standardEasing
      });
    };
    const onClickOutside = (e) => {
      emit("click:outside", e);
      if (!props.persistent) {
        isActive.value = false;
      } else {
        animateClick();
      }
    };
    const onKeydown = ({
      key
    }) => {
      if (key === keyValues.esc && isTop.value) {
        if (!props.persistent) {
          isActive.value = false;
        } else {
          animateClick();
        }
      }
    };
    watch(isActive, (val) => {
      if (val)
        isInternalActive.value = true;
      if (IN_BROWSER) {
        if (val) {
          window.addEventListener("keydown", onKeydown);
        } else {
          window.removeEventListener("keydown", onKeydown);
        }
      }
    }, {
      immediate: true
    });
    useBackButton((next) => {
      if (isTop.value && isActive.value) {
        next(false);
        if (!props.persistent) {
          isActive.value = false;
        } else {
          animateClick();
        }
      } else {
        next();
      }
    });
    const top = ref();
    watch(() => {
      return isActive.value && (props.absolute || props.contained) && teleportTarget.value == null;
    }, (val) => {
      if (val) {
        const scrollParent = getScrollParent(root.value);
        if (scrollParent && scrollParent !== document.scrollingElement) {
          top.value = scrollParent.scrollTop;
        }
      }
    });
    const onAfterLeave = () => {
      isInternalActive.value = false;
      onAfterLeaveByLazy();
    };
    const closeConditional = () => {
      return isActive.value && isTop.value;
    };
    const close = () => {
      isActive.value = false;
    };
    useRender(() => {
      var _a;
      const on = toHandlers(activatorEvents.value);
      return createVNode(Fragment, null, [(_a = slots.activator) == null ? void 0 : _a.call(slots, {
        close,
        isActive: isActive.value,
        props: mergeProps({
          ref: activatorRef
        }, on, props.activatorProps),
        on
      }), IN_BROWSER && createVNode(Teleport, {
        "disabled": !teleportTarget.value,
        "to": teleportTarget.value
      }, {
        default: () => [hasContent.value && createVNode("div", mergeProps({
          "class": ["ve-overlay", {
            "ve-overlay--absolute": props.absolute || props.contained,
            "ve-overlay--active": isActive.value,
            "ve-overlay--contained": props.contained
          }, anchorClasses.value, themeClasses.value],
          "ref": root,
          "style": {
            top: convertToUnit(top.value),
            zIndex: overlayZIndex.value
          }
        }, attrs), [createVNode(Scrim, {
          "color": typeof props.scrim === "string" ? props.scrim : void 0,
          "modelValue": isActive.value && !!props.scrim
        }, null), createVNode(MaybeTransition, {
          "appear": true,
          "onAfterLeave": onAfterLeave,
          "persisted": true,
          "transition": props.transition,
          "target": activatorEl.value
        }, {
          default: () => {
            var _a2;
            return [withDirectives(createVNode("div", mergeProps({
              "ref": contentEl,
              "class": ["ve-overlay__wrapper", props.contentClass],
              "style": [props.contentStyle, dimensionStyles.value, contentStyles.value]
            }, toHandlers(contentEvents.value)), [(_a2 = slots.default) == null ? void 0 : _a2.call(slots, {
              close,
              isActive
            })]), [[vShow, isActive.value], [resolveDirective("click-outside"), {
              handler: onClickOutside,
              closeConditional,
              include: () => [activatorEl.value]
            }]])];
          }
        })])]
      })]);
    });
    return {
      animateClick,
      close,
      contentEl,
      activatorEl,
      updatePosition
    };
  }
});
export {
  Overlay,
  makeOverlayProps
};
//# sourceMappingURL=overlay.mjs.map
