import React, {useEffect, useRef} from 'react';
import {socket} from "../api.js";

const PlayerCollaps = ({ roomId, videoUrl, setVideoUrl }) => {
const iframeRef = useRef(null);
const lockSeekRef = useRef(false);

// Предполагаем, что VideoUrl уже содержит необходимый videoId.
useEffect(() => {
    let currentSeason ="";
    let currentEpisode ="";
    console.log(videoUrl)
    // Обработчик сообщений из iframe
    const handleMessage = (event) => {
        // **Рекомендуется** проверить origin для безопасности
        // if (event.origin !== 'http://127.0.0.1:3002') return;

        const data = event.data;
        if (data && data.type) {
            switch (data.type) {
                case 'play':
                    socket.emit('videoControl', { roomId, action: "play", data: null });
                    break;
                case 'pause':
                    socket.emit('videoControl', { roomId, action: "pause", data: null });
                    break;
                case 'seeking':
                    if (!lockSeekRef.current) {
                        socket.emit('videoControl', { roomId, action: "seek", data: Math.floor(data.time) });
                    }
                    break;
                case 'playlistItem':
                    currentSeason = data.season;
                    currentEpisode = data.episode;
                    socket.emit('videoControl', {
                        roomId,
                        action: "changeEpisode",
                        data: { season: data.season, episode: data.episode }
                    });
                    break;
                default:
                    break;
            }
        }
    };

    window.addEventListener('message', handleMessage);

    // Обработчик событий сокета
    const handleVideoControl = (data) => {

        if (iframeRef.current) {
            let message = {};

            switch (data.action) {
                case "setUrl":
                    setVideoUrl(data.data);
                    break;
                case "play":
                case "pause":
                    message.action = data.action;
                    break;
                case "seek":
                case "sync":
                    message.action = 'seek';
                    message.time = data.data;
                    lockSeekRef.current = true;
                    // Устанавливаем таймаут для сброса блокировки
                    setTimeout(() => { lockSeekRef.current = false; }, 1000);
                    break;
                case "changeEpisode":
                    if (currentSeason.toString() !== data.data.season.toString()  || currentEpisode.toString() !== data.data.episode.toString()) {
                        message.action = 'changeEpisode';
                        message.season = data.data.season;
                        message.episode = data.data.episode;
                    }

                    break;
                default:
                    break;
            }

            if (Object.keys(message).length > 0) {
                console.log(message)
                iframeRef.current.contentWindow.postMessage(message, '*');
            }
        }
    };

    socket.on('videoControl', handleVideoControl);

    // Очистка обработчиков при размонтировании или изменении videoId
    return () => {
        window.removeEventListener('message', handleMessage);
        socket.off('videoControl', handleVideoControl);
    };
}, [socket, roomId, videoUrl, setVideoUrl]);

return (
    <>
        {videoUrl ? (
            <iframe
                key={videoUrl} // Ключ для пересоздания iframe при изменении videoId
                ref={iframeRef}
                src={`http://127.0.0.1:3002/api/collaps/${videoUrl}`}
                style={{ width: '100%', height: '100%', border: 'none' }}
                allow="autoplay; encrypted-media"
                allowFullScreen
                title="Video Player"
            />
        ) : (
            <div style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <p>Выберите видео для воспроизведения.</p>
            </div>
        )}
    </>
);

};

export default PlayerCollaps; как переанонсировать и привязать слушателей при потере соединения socket.io старого и создании нового