import React, { useEffect, useRef, useState } from 'react';
import '@vidstack/react/player/styles/default/theme.css';
import '@vidstack/react/player/styles/default/layouts/audio.css';
import '@vidstack/react/player/styles/default/layouts/video.css';

import { MediaPlayer, MediaProvider, Poster, Track } from "@vidstack/react"
import {DefaultVideoLayout, defaultLayoutIcons, DefaultAudioLayout} from '@vidstack/react/player/layouts/default';

import { socket } from '../api';
import Chat from './Chat';

const Player = ({ roomId, nickname, VideoUrl, setVideoUrl }) => {
    const [showChat, setShowChat] = useState(false);
    const playerRef = useRef(null);
    const lockSeek = useRef(false);

    const toggleChat = () => {
        setShowChat(!showChat);
    };

    useEffect(() => {
        const player = playerRef.current;

        const sendCurrentTime = () => {
            const currentTime = player.currentTime;
            if (parseInt(currentTime) !== 0) {
                socket.emit('videoControl', { roomId, action: 'sync', data: parseInt(currentTime) });
            }
        };

        const intervalId = setInterval(sendCurrentTime, 5000);

        const handlePlay = () => {
            socket.emit('videoControl', { roomId, action: 'play' });
        };

        const handlePause = () => {
            socket.emit('videoControl', { roomId, action: 'pause' });
        };

        const handleSeeked = () => {
            if (!lockSeek.current) {
                socket.emit('videoControl', { roomId, action: 'seek', data: parseInt(player.currentTime) });
            }
        };

        player.addEventListener('play', handlePlay);
        player.addEventListener('pause', handlePause);
        player.addEventListener('seeked', handleSeeked);

        const handleVideoControl = (data) => {
            if (data) {
                if (data.action === 'setUrl') {
                    setVideoUrl(data.data);
                } else if (data.action === 'play') {
                    player.play();
                } else if (data.action === 'pause') {
                    player.pause();
                } else if (data.action === 'seek' || data.action === 'sync') {
                    lockSeek.current = true;
                    if (Math.abs(player.currentTime - data.data) > 2) {
                        player.currentTime = data.data;
                    }
                    lockSeek.current = false;
                }
            }
        };

        socket.on('videoControl', handleVideoControl);

        return () => {
            clearInterval(intervalId);
            socket.off('videoControl', handleVideoControl);
            player.removeEventListener('play', handlePlay);
            player.removeEventListener('pause', handlePause);
            player.removeEventListener('seeked', handleSeeked);
        };
    }, [socket, VideoUrl, roomId, setVideoUrl]);

    return (
        <div style={{  width: '100%' }}>
            <MediaPlayer
                ref={playerRef}
                src='https://files.vidstack.io/sprite-fight/720p.mp4'
                viewType='video'
                streamType='on-demand'
                logLevel='warn'
                crossOrigin
                playsInline
                title='Sprite Fight'
                poster='https://files.vidstack.io/sprite-fight/poster.webp'
            >
                {/* Видео */}
                <MediaProvider />
                <DefaultAudioLayout icons={defaultLayoutIcons} />
                <DefaultVideoLayout icons={defaultLayoutIcons} />

            </MediaPlayer>


        </div>
    );
};

export default Player; убери привязку высоты к ширине т.к. это не позволяет расширять плеер на все досутпное место и плеер уходит за пределы