import React, {
    useRef,
    useEffect,
    forwardRef,
    useImperativeHandle,
} from "react";
import videojs from "video.js";
import eventBus from "../util/EventBus.jsx";

import TimelineStacked from "./TimelineStacked.jsx";
import "video.js/dist/video-js.css";
import MultipleTimelinesInterface from "./MultipleTimelinesInterface.jsx";
import "./VideoPlayerTimelineStack.css";

const VideoPlayerTimelineStack = function VideoPlayerTimelineStack({
    video_src,
    onDelete
}) {
    const playerInstanceRef = useRef(null);
    const videoRef = useRef(null);

    useEffect(() => {
        // Prevent double init in StrictMode
        if (!playerInstanceRef.current && videoRef.current) {
            playerInstanceRef.current = videojs(videoRef.current, {
                controls: true,
                preload: "auto",
                autoplay: true,
                fluid: true,
                responsive: true,
                fill: false,
                aspectRatio: "16:9", // Add aspect ratio
                width: 932,
                height: 523, // Calculate based on aspect ratio
            });
        }

        playerInstanceRef.current.on("timeupdate", async function (event) {
            eventBus.publish(video_src, { time: this.currentTime() });
        });

        if (playerInstanceRef.current && videoRef.current) {
            const player = playerInstanceRef.current;
            player.src({ src: video_src, type: "video/mp4" });
        }

        const resizeObserver = new ResizeObserver((entries) => {
            console.log(entries);
            console.log(entries);
        });
        const videoContainer = videoRef.current.closest(".video-parent");
        if (videoContainer) {
            resizeObserver.observe(videoContainer);
        }

        return () => {
            if (playerInstanceRef.current) {
                playerInstanceRef.current.dispose();
                playerInstanceRef.current = null;
            }
        };
    }, [video_src]); // Add video_src to dependencies

    const handleDelete = () => {
        // Clean up video player before deletion
        if (playerInstanceRef.current) {
            playerInstanceRef.current.dispose();
            playerInstanceRef.current = null;
        }
        
        // Call parent's delete handler
        if (onDelete) {
            onDelete();
        }
    };

    return (
        <div className="timelines-and-video-parent">
            <button 
                className="delete-video-btn" 
                onClick={handleDelete}
                title="Delete this video player"
            >
                ×
            </button>
            
            <div className="video-parent">
                <video
                    ref={videoRef}
                    className="video-js vjs-default-skin"
                    controls
                    preload="auto"
                    data-setup="{}"
                />
            </div>
            <div className="timelines-parent">
                <MultipleTimelinesInterface video_path={video_src} />
            </div>
        </div>
    );
};

export default VideoPlayerTimelineStack;
