"use client";
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var react = require('react');
var react$1 = require('motion/react');
var utils = require('@/lib/utils');
var jsxRuntime = require('react/jsx-runtime');

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
function usePrefersReducedMotion() {
  const [prefersReducedMotion, setPrefersReducedMotion] = react.useState(false);
  react.useEffect(() => {
    if (typeof window === "undefined") return;
    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
    setPrefersReducedMotion(mediaQuery.matches);
    const handleChange = /* @__PURE__ */ __name((event) => {
      setPrefersReducedMotion(event.matches);
    }, "handleChange");
    mediaQuery.addEventListener("change", handleChange);
    return () => mediaQuery.removeEventListener("change", handleChange);
  }, []);
  return prefersReducedMotion;
}
__name(usePrefersReducedMotion, "usePrefersReducedMotion");
var slideVariants = {
  hidden: { opacity: 0, x: -50 },
  visible: /* @__PURE__ */ __name((i) => ({
    opacity: 1,
    x: 0,
    transition: {
      delay: i * 0.1,
      duration: 0.5,
      ease: "easeOut"
    }
  }), "visible"),
  exit: { opacity: 0, x: 50, transition: { duration: 0.3 } }
};
var fadeVariants = {
  hidden: { opacity: 0 },
  visible: /* @__PURE__ */ __name((i) => ({
    opacity: 1,
    transition: {
      delay: i * 0.1,
      duration: 0.5,
      ease: "easeOut"
    }
  }), "visible"),
  exit: { opacity: 0, transition: { duration: 0.3 } }
};
var scaleVariants = {
  hidden: { opacity: 0, scale: 0.8 },
  visible: /* @__PURE__ */ __name((i) => ({
    opacity: 1,
    scale: 1,
    transition: {
      delay: i * 0.1,
      duration: 0.5,
      ease: "easeOut",
      type: "spring",
      stiffness: 100
    }
  }), "visible"),
  exit: { opacity: 0, scale: 0.8, transition: { duration: 0.3 } }
};
var slideUpVariants = {
  hidden: { opacity: 0, y: 50 },
  visible: /* @__PURE__ */ __name((i) => ({
    opacity: 1,
    y: 0,
    transition: {
      delay: i * 0.1,
      duration: 0.5,
      ease: "easeOut"
    }
  }), "visible"),
  exit: { opacity: 0, y: -50, transition: { duration: 0.3 } }
};
var slideDownVariants = {
  hidden: { opacity: 0, y: -50 },
  visible: /* @__PURE__ */ __name((i) => ({
    opacity: 1,
    y: 0,
    transition: {
      delay: i * 0.1,
      duration: 0.5,
      ease: "easeOut"
    }
  }), "visible"),
  exit: { opacity: 0, y: 50, transition: { duration: 0.3 } }
};
var slideLeftVariants = {
  hidden: { opacity: 0, x: 50 },
  visible: /* @__PURE__ */ __name((i) => ({
    opacity: 1,
    x: 0,
    transition: {
      delay: i * 0.1,
      duration: 0.5,
      ease: "easeOut"
    }
  }), "visible"),
  exit: { opacity: 0, x: -50, transition: { duration: 0.3 } }
};
var slideRightVariants = {
  hidden: { opacity: 0, x: -50 },
  visible: /* @__PURE__ */ __name((i) => ({
    opacity: 1,
    x: 0,
    transition: {
      delay: i * 0.1,
      duration: 0.5,
      ease: "easeOut"
    }
  }), "visible"),
  exit: { opacity: 0, x: 50, transition: { duration: 0.3 } }
};
var animationVariants = {
  slide: slideVariants,
  fade: fadeVariants,
  scale: scaleVariants,
  slideUp: slideUpVariants,
  slideDown: slideDownVariants,
  slideLeft: slideLeftVariants,
  slideRight: slideRightVariants
};
function useVirtualizedList(items, containerHeight, itemHeight, enabled) {
  const [scrollTop, setScrollTop] = react.useState(0);
  const visibleItems = react.useMemo(() => {
    if (!enabled) return items;
    const startIndex = Math.floor(scrollTop / itemHeight);
    const endIndex = Math.min(
      startIndex + Math.ceil(containerHeight / itemHeight) + 1,
      items.length
    );
    return items.slice(startIndex, endIndex).map((item, index) => ({
      ...item,
      virtualIndex: startIndex + index,
      style: {
        position: "absolute",
        top: (startIndex + index) * itemHeight,
        height: itemHeight,
        width: "100%"
      }
    }));
  }, [items, scrollTop, itemHeight, containerHeight, enabled]);
  const totalHeight = items.length * itemHeight;
  const handleScroll = react.useCallback((e) => {
    setScrollTop(e.currentTarget.scrollTop);
  }, []);
  return {
    visibleItems,
    totalHeight,
    handleScroll
  };
}
__name(useVirtualizedList, "useVirtualizedList");
function AnimatedList({
  items,
  animation = "slideUp",
  staggerDelay = 100,
  duration = 500,
  reorderable = false,
  enableAddRemove = true,
  layout = "vertical",
  gridColumns = 3,
  className,
  itemClassName,
  style,
  onReorder,
  onItemClick,
  showHoverEffects = true,
  customVariants,
  virtualized = false,
  itemHeight = 60,
  containerHeight = 400,
  autoStart = true,
  onAnimationComplete
}) {
  const [animatedItems, setAnimatedItems] = react.useState(items);
  const [animationKey, setAnimationKey] = react.useState(0);
  const prefersReducedMotion = usePrefersReducedMotion();
  const variants = customVariants || animationVariants[animation];
  const shouldAnimate = !prefersReducedMotion && autoStart;
  const { visibleItems, totalHeight, handleScroll } = useVirtualizedList(
    items,
    containerHeight,
    itemHeight,
    virtualized
  );
  react.useEffect(() => {
    setAnimatedItems(items);
  }, [items]);
  const updatedVariants = react.useMemo(() => {
    if (!variants.visible || typeof variants.visible !== "function")
      return variants;
    return {
      ...variants,
      visible: /* @__PURE__ */ __name((i) => {
        const original = variants.visible;
        const originalResult = original(i);
        return {
          ...originalResult,
          transition: {
            ...originalResult.transition,
            delay: i * (staggerDelay / 1e3),
            duration: duration / 1e3
          }
        };
      }, "visible")
    };
  }, [variants, staggerDelay, duration]);
  const getLayoutClassName = /* @__PURE__ */ __name(() => {
    switch (layout) {
      case "horizontal":
        return "flex flex-row gap-4 overflow-x-auto";
      case "grid":
        return `grid gap-4 grid-cols-${gridColumns}`;
      default:
        return "flex flex-col gap-4";
    }
  }, "getLayoutClassName");
  const renderListItem = /* @__PURE__ */ __name((item, index, virtualStyle) => {
    const itemContent = /* @__PURE__ */ jsxRuntime.jsx(
      react$1.motion.div,
      {
        custom: index,
        variants: updatedVariants,
        initial: shouldAnimate ? "hidden" : "visible",
        animate: "visible",
        exit: "exit",
        layout: enableAddRemove,
        className: utils.cn(
          "cursor-pointer select-none",
          showHoverEffects && "hover:scale-105 transition-transform",
          itemClassName
        ),
        style: virtualStyle,
        onClick: () => onItemClick?.(item, index),
        whileHover: showHoverEffects ? { scale: 1.02 } : void 0,
        whileTap: showHoverEffects ? { scale: 0.98 } : void 0,
        onAnimationComplete: () => {
          if (index === animatedItems.length - 1) {
            onAnimationComplete?.();
          }
        },
        children: item.content
      },
      item.id
    );
    return itemContent;
  }, "renderListItem");
  if (reorderable && !virtualized) {
    return /* @__PURE__ */ jsxRuntime.jsx(
      react$1.Reorder.Group,
      {
        axis: layout === "horizontal" ? "x" : "y",
        values: animatedItems,
        onReorder: (newItems) => {
          setAnimatedItems(newItems);
          onReorder?.(newItems);
        },
        className: utils.cn(getLayoutClassName(), className),
        style,
        children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "popLayout", children: animatedItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
          react$1.Reorder.Item,
          {
            value: item,
            className: utils.cn(
              "cursor-grab active:cursor-grabbing",
              itemClassName
            ),
            whileDrag: { scale: 1.05, zIndex: 10 },
            children: item.content
          },
          item.id
        )) })
      }
    );
  }
  if (virtualized) {
    return /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        className: utils.cn("overflow-auto", className),
        style: { height: containerHeight, ...style },
        onScroll: handleScroll,
        children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: totalHeight, position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "popLayout", children: visibleItems.map(
          (item, index) => renderListItem(item, item.virtualIndex || index, item.style)
        ) }) })
      }
    );
  }
  return /* @__PURE__ */ jsxRuntime.jsx(
    react$1.motion.div,
    {
      className: utils.cn(getLayoutClassName(), className),
      style,
      initial: "hidden",
      animate: "visible",
      children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "popLayout", children: animatedItems.map((item, index) => renderListItem(item, index)) })
    },
    animationKey
  );
}
__name(AnimatedList, "AnimatedList");
var AnimatedListPresets = {
  /**
   * Simple fade in list
   */
  FadeList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedList, { animation: "fade", ...props }), "FadeList"),
  /**
   * Scale up from center
   */
  ScaleList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedList, { animation: "scale", ...props }), "ScaleList"),
  /**
   * Slide up from bottom
   */
  SlideUpList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedList, { animation: "slideUp", ...props }), "SlideUpList"),
  /**
   * Horizontal carousel-style list
   */
  CarouselList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedList, { layout: "horizontal", animation: "slideLeft", ...props }), "CarouselList"),
  /**
   * Grid with scale animation
   */
  GridList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedList, { layout: "grid", animation: "scale", ...props }), "GridList"),
  /**
   * Reorderable task list
   */
  TaskList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedList, { reorderable: true, animation: "slideUp", showHoverEffects: true, ...props }), "TaskList")
};
var list_default = AnimatedList;

exports.AnimatedList = AnimatedList;
exports.AnimatedListPresets = AnimatedListPresets;
exports.default = list_default;
