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; как переанонсировать при потере соединения старого и создании нового