"use strict";
"use client";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var animations_exports = {};
__export(animations_exports, {
  areBoxAnimationPropsEqual: () => areBoxAnimationPropsEqual,
  useBoxAnimation: () => useBoxAnimation,
  useItemAnimation: () => useItemAnimation
});
module.exports = __toCommonJS(animations_exports);
var import_react = require("react");
var import_use_style = require("../../../runtimes/react/use-style");
var import_hooks = require("../../hooks");
var import_grid_item = require("../../shared/grid-item");
var import_constants = require("./constants");
function useElementOnScreen(options) {
  const [isVisible, setIsVisible] = (0, import_react.useState)(false);
  const intersectionObserverRef = (0, import_react.useRef)(null);
  const setElement = (0, import_react.useCallback)((element) => {
    if (element != null) {
      const observer = new IntersectionObserver(([entry]) => {
        if (entry?.isIntersecting)
          setIsVisible(true);
      }, options);
      observer.observe(element);
      intersectionObserverRef.current = observer;
    } else {
      intersectionObserverRef.current?.disconnect();
      intersectionObserverRef.current = null;
    }
  }, []);
  return [isVisible, setElement];
}
function compareResponsiveValues(a, b) {
  if (a == null && b == null) {
    return true;
  }
  if (a != null && b != null) {
    let isEqual = true;
    a.forEach((currentA, index) => {
      const currentB = b.at(index);
      if (currentB == null) {
        isEqual = false;
        return;
      }
      if (currentA.deviceId != currentB?.deviceId || currentA.value != currentB.value) {
        isEqual = false;
      }
    });
    return isEqual;
  }
  return false;
}
function areBoxAnimationPropsEqual(prevProps, props) {
  return compareResponsiveValues(prevProps.boxAnimateType, props.boxAnimateType) && compareResponsiveValues(prevProps.boxAnimateDuration, props.boxAnimateDuration) && compareResponsiveValues(prevProps.boxAnimateDelay, props.boxAnimateDelay) && compareResponsiveValues(prevProps.itemAnimateType, props.itemAnimateType) && compareResponsiveValues(prevProps.itemAnimateDuration, props.itemAnimateDuration) && compareResponsiveValues(prevProps.itemAnimateDelay, props.itemAnimateDelay) && compareResponsiveValues(prevProps.itemStaggerDuration, props.itemStaggerDuration);
}
const exitedBoxAnimationProperties = {
  none: { opacity: 1 },
  fadeIn: { opacity: 0 },
  fadeLeft: { transform: "translate3d(60px,0,0)", opacity: 0 },
  fadeRight: { transform: "translate3d(-60px,0,0)", opacity: 0 },
  fadeDown: { transform: "translate3d(0,-80px,0)", opacity: 0 },
  fadeUp: { transform: "translate3d(0,80px,0)", opacity: 0 },
  blurIn: { filter: "blur(20px)", opacity: 0 },
  scaleDown: {
    transform: "scale(1.2)",
    opacity: 0
  },
  scaleUp: {
    transform: "scale(.75)",
    opacity: 0
  }
};
const enteredBoxAnimationProperties = {
  none: { opacity: 1 },
  fadeIn: { opacity: 1 },
  fadeLeft: { transform: "translate3d(0px,0,0)", opacity: 1 },
  fadeRight: { transform: "translate3d(0px,0,0)", opacity: 1 },
  fadeDown: { transform: "translate3d(0,0px,0)", opacity: 1 },
  fadeUp: { transform: "translate3d(0,0px,0)", opacity: 1 },
  blurIn: { filter: "blur(0px)", opacity: 1 },
  scaleDown: {
    transform: "scale(1)",
    opacity: 1
  },
  scaleUp: {
    transform: "scale(1)",
    opacity: 1
  }
};
function useBoxAnimation(responsiveAnimationType, responsiveDuration, responisveDelay, itemResponsiveAnimationType) {
  const [isVisible, setElement] = useElementOnScreen({
    root: null,
    rootMargin: `0px 0px -10% 0px`,
    threshold: 0.2
  });
  const animationType = (0, import_hooks.useMediaQuery)(responsiveAnimationType) || import_constants.DEFAULT_BOX_ANIMATE_TYPE;
  const itemAnimationType = (0, import_hooks.useMediaQuery)(itemResponsiveAnimationType) || import_constants.DEFAULT_ITEM_ANIMATE_TYPE;
  const duration = (0, import_hooks.useMediaQuery)(responsiveDuration) || import_constants.DEFAULT_BOX_ANIMATE_DURATION;
  const delay = (0, import_hooks.useMediaQuery)(responisveDelay) || import_constants.DEFAULT_BOX_ANIMATE_DELAY;
  const actualDelay = delay * 1e3;
  const actualDuration = duration * 1e3;
  const entered = {
    ...enteredBoxAnimationProperties[animationType],
    transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`,
    [`& > div > .${import_grid_item.gridItemIdentifierClassName}`]: {
      ...enteredBoxAnimationProperties[itemAnimationType]
    }
  };
  const exited = {
    ...exitedBoxAnimationProperties[animationType],
    transition: `all 0ms`,
    [`& > div > .${import_grid_item.gridItemIdentifierClassName}`]: {
      ...exitedBoxAnimationProperties[itemAnimationType]
    }
  };
  const [isEntered, setEntered] = (0, import_react.useState)(false);
  (0, import_react.useEffect)(() => {
    if (isVisible && !isEntered)
      setEntered(true);
  }, [isVisible, entered]);
  const replayAnimation = (0, import_react.useCallback)(() => {
    setEntered(false);
  }, []);
  return [
    (0, import_use_style.useStyle)({
      "@media (prefers-reduced-motion: no-preference)": isEntered ? entered : exited
    }),
    replayAnimation,
    setElement
  ];
}
function useItemAnimation(responsiveDuration, responisveDelay, responsiveStagger, index) {
  const duration = (0, import_hooks.useMediaQuery)(responsiveDuration) || import_constants.DEFAULT_BOX_ANIMATE_DURATION;
  const delay = (0, import_hooks.useMediaQuery)(responisveDelay) || import_constants.DEFAULT_BOX_ANIMATE_DELAY;
  const stagger = (0, import_hooks.useMediaQuery)(responsiveStagger) || import_constants.DEFAULT_ITEM_STAGGER_DURATION;
  const delayFromStagger = responsiveStagger == null || index == null ? 0 : stagger * index;
  const actualDelay = (delay + delayFromStagger) * 1e3;
  const actualDuration = duration * 1e3;
  return (0, import_use_style.useStyle)({
    "@media (prefers-reduced-motion: no-preference)": {
      transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`
    }
  });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  areBoxAnimationPropsEqual,
  useBoxAnimation,
  useItemAnimation
});
//# sourceMappingURL=animations.js.map