import { jsx } from 'react/jsx-runtime';
import React__default, { createContext, useRef, useState, useEffect, useContext } from 'react';
import { useReducedMotion, motion } from 'motion/react';
import { cn } from '../../../utils/cn.js';
import { useTimelineContext } from './Timeline.js';
import { timelineHorizontalItemVariants, getDirectionalVariants, timelineItemVariants } from './Timeline.animations.js';

// Create context for TimelineItem
const TimelineItemContext = createContext(undefined);
// Hook to use TimelineItem context
const useTimelineItemContext = () => {
    const ctx = useContext(TimelineItemContext);
    if (!ctx)
        throw new Error("Timeline.Marker and Timeline.Content must be used within Timeline.Item");
    return ctx;
};
const TimelineItem = React__default.forwardRef(({ children, className, status = "pending", ...props }, ref) => {
    const { layout, align, theme, totalItems } = useTimelineContext();
    const shouldReduceMotion = useReducedMotion();
    const itemRef = useRef(null);
    const [isVisible, setIsVisible] = useState(false);
    // Determine item index from parent
    const resolvedRef = ref || itemRef;
    // Find index among siblings for alternate layout
    const [index, setIndex] = useState(0);
    useEffect(() => {
        const element = resolvedRef && "current" in resolvedRef ? resolvedRef.current : itemRef.current;
        if (element === null || element === void 0 ? void 0 : element.parentElement) {
            const siblings = Array.from(element.parentElement.children);
            const idx = siblings.indexOf(element);
            setIndex(idx);
        }
    }, [resolvedRef]);
    // IntersectionObserver for scroll-triggered animation
    useEffect(() => {
        const element = resolvedRef && "current" in resolvedRef ? resolvedRef.current : itemRef.current;
        if (!element)
            return;
        const observer = new IntersectionObserver(([entry]) => {
            if (entry.isIntersecting) {
                setIsVisible(true);
                observer.unobserve(element);
            }
        }, { threshold: 0.2 });
        observer.observe(element);
        return () => observer.disconnect();
    }, [resolvedRef]);
    const isFirst = index === 0;
    const isLast = index === totalItems - 1;
    const isHorizontal = layout === "horizontal";
    // Determine which side this item is on for alternate layout
    const itemSide = align === "alternate"
        ? index % 2 === 0
            ? "left"
            : "right"
        : align;
    // Select animation variants based on layout and alignment
    const getVariants = () => {
        if (shouldReduceMotion)
            return undefined;
        if (isHorizontal)
            return timelineHorizontalItemVariants;
        if (align === "alternate") {
            return getDirectionalVariants(itemSide);
        }
        return timelineItemVariants;
    };
    // Context value for Marker and Content
    const contextValue = {
        status,
        index,
        isFirst,
        isLast,
    };
    // Build className based on layout
    const isAlternateRight = align === "alternate" && index % 2 !== 0;
    // Filter out conflicting motion props from rest
    const { onDrag, onDragEnd, onDragStart, onAnimationStart, onAnimationEnd, ...safeProps } = props;
    const variants = getVariants();
    return (jsx(TimelineItemContext.Provider, { value: contextValue, children: jsx(motion.div, { ref: ref || itemRef, className: cn(isHorizontal ? theme.itemStyleHorizontal : theme.itemStyle, 
            // For right-aligned or alternate-right, reverse the flex direction
            !isHorizontal && align === "right" && "flex-row-reverse", !isHorizontal && isAlternateRight && "flex-row-reverse", className), "data-status": status, "data-side": itemSide, "data-layout": layout, role: "listitem", initial: variants ? "hidden" : undefined, animate: variants && isVisible ? "visible" : variants ? "hidden" : undefined, variants: variants, ...safeProps, children: children }) }));
});
TimelineItem.displayName = "TimelineItem";

export { TimelineItem, useTimelineItemContext };
