/**
 * TrainingStage Component
 * Description: Auto-advancing showcase of one session's outputs, with a
 *              thumbnail rail that doubles as navigation
 * Dependencies: window.BeforeAfter
 */

window.TrainingStage = ({ items, labels }) => {
    const { useState, useEffect, useRef } = React;
    const [index, setIndex] = useState(0);
    const [out, setOut] = useState(false);
    const rootRef = useRef(null);
    const hovered = useRef(false);
    const [visible, setVisible] = useState(false);

    const reduced = typeof matchMedia === 'function' &&
        matchMedia('(prefers-reduced-motion: reduce)').matches;

    // Only run the timer while the block is actually on screen
    useEffect(() => {
        const node = rootRef.current;
        if (!node) return;
        const io = new IntersectionObserver(
            (entries) => entries.forEach((e) => setVisible(e.isIntersecting)),
            { threshold: 0.25 }
        );
        io.observe(node);
        return () => io.disconnect();
    }, []);

    const go = (next) => {
        const target = (next + items.length) % items.length;
        if (reduced) { setIndex(target); return; }
        setOut(true);
        setTimeout(() => { setIndex(target); setOut(false); }, 280);
    };

    useEffect(() => {
        if (reduced || !visible || items.length < 2) return;
        const id = setInterval(() => {
            if (!hovered.current) go(index + 1);
        }, 4600);
        return () => clearInterval(id);
    }, [index, visible, items.length, reduced]);

    const item = items[index];

    return (
        <div className="stage" ref={rootRef}
             onPointerEnter={() => { hovered.current = true; }}
             onPointerLeave={() => { hovered.current = false; }}
             onFocus={() => { hovered.current = true; }}
             onBlur={() => { hovered.current = false; }}>
            <div className={'stage-view' + (out ? ' is-out' : '')}>
                <window.BeforeAfter item={item} labels={labels} />
            </div>
            <div className="stage-bar">
                <span className="stage-cap">{item.t}</span>
                <span className="stage-count">
                    {String(index + 1).padStart(2, '0')} / {String(items.length).padStart(2, '0')}
                </span>
            </div>
            <div className="rail">
                {items.map((it, i) => (
                    <button type="button" key={it.k} aria-label={it.t}
                            className={i === index ? 'on' : ''}
                            onClick={() => go(i)}>
                        <img src={window.ImageUtils.getImagePath(it.k)} alt="" loading="lazy"
                             draggable={false} onDragStart={(e) => e.preventDefault()} />
                    </button>
                ))}
            </div>
        </div>
    );
};