import '../css/VideoFeed.css'

import Player from "./Player.jsx"
import { useEffect, useRef } from "react";
import { createScope, animate, createSpring } from 'animejs';

function VideoFeed() {
    const root = useRef(null);
    const scope = useRef(null);
    const screenHeight = window.innerHeight;
    let scrolling = false;

    const stiffness = 550;
    const damping = 15;

    // Animation functions (no hooks inside)
    const scrollDown = () => {
        scope.current = createScope({ root }).add(() => {
            animate(".bottom-video", {
                y: [-screenHeight, 0],
                ease: createSpring({ stiffness, damping }),
            });
            animate(".top-video", {
                y: [0, screenHeight],
                ease: createSpring({ stiffness, damping }),
            });
        });
    };
    const scrollUp = () => {
        scope.current = createScope({ root }).add(() => {
            animate(".bottom-video", {
                y: [0, -screenHeight],
                ease: createSpring({ stiffness, damping }),
            });
            animate(".top-video", {
                y: [-screenHeight, 0],
                ease: createSpring({ stiffness, damping }),
            });
        });
    };

    useEffect(() => {
        const handleWheel = (ev) => {
            if (ev.deltaY > 0) {
                console.log("scroll up")
                scrollUp();
            } else {
                scrollDown();
            }
        };
        document.addEventListener("wheel", handleWheel);
        return () => document.removeEventListener("wheel", handleWheel);
    }, [screenHeight]);

    return (
        <>
            <div ref={root}>
                <Player className="top-video" video={"/assets/16_final.mp4"} information={{
                    title: "habibi habibi",
                    description: "my name is john clapper. i clap everyone. i clap first at the cinema. no one else claps.",
                    likes: "1.2M",
                    dislikes: "1K",
                    comments: "1.2K",
                    shares: "392",
                    author: "John Clapper",
                    authorAvatar: "https://i.imgur.com/4Z2b7aH.png",
                    authorId: "johnclapper",
                }} />
                <Player top={-screenHeight} className="bottom-video" video={"/assets/34_final.mp4"} information={{
                    title: "habibi habibi",
                    description: "my name is john clapper. i clap everyone. i clap first at the cinema. no one else claps.",
                    likes: "1.2M",
                    dislikes: "1K",
                    comments: "1.2K",
                    shares: "392",
                    author: "John Clapper",
                    authorAvatar: "https://i.imgur.com/4Z2b7aH.png",
                    authorId: "johnclapper",
                }} />
            </div>
        </>
    )
}

export default VideoFeed
