import React, { useEffect, useState } from 'react';
import {TrackPlayer} from './components/TrackPlayer';

const Modal = ({ isOpen, onClose, title, message }) => {
    if (!isOpen) return null;

    return (
        <div style={styles.modalOverlay}>
            <div style={styles.modal}>
                <h2>{title}</h2>
                <p>{message}</p>
                <button onClick={onClose}>Close</button>
            </div>
        </div>
    );
};

const styles = {
    modalOverlay: {
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    },
    modal: {
        background: 'white',
        padding: '20px',
        borderRadius: '5px',
        textAlign: 'center',
    },
};

const App = () => {
    const [modal, setModal] = useState({ isOpen: false, title: '', message: '' });
    const [playerSocket, setPlayerSocket] = useState(null);
    const [queue, setQueue] = useState(null);
    const [next, setNext] = useState(null);
    const [ok, setOk] = useState(false);

    useEffect(() => {
        const shopId = window.location.pathname.split('/')[1]; // Get shopId from the URL
        const user_id = localStorage.getItem('user_id');

        // Connect to Socket.IO if user_id is present
        // if (user_id) {
            // connectSocket(shopId, 1);
        // }

        // const socket = getSocket();

        // Modal opening function
        const openModal = (title, message) => {
            setModal({ isOpen: true, title, message });
        };

        // Socket event listeners
        // if (socket) {
        //     socket.on('pleaseSelect', () => openModal('Select a Track', 'Please select a track to play.'));
        //     socket.on('pleasePlay', () => openModal('Play Track', 'Please play the selected track.'));
        //     socket.on('playSuccess', () => openModal('Success', 'The track is now playing.'));
        //     socket.on('updateMusicInfo', ({ playerSocket, queue }) => {
        //         setPlayerSocket(playerSocket);
        //         setQueue(queue);
        //     });
        //     socket.on('setNext', (nextTrack) => setNext(nextTrack));
        // }

        // Cleanup on component unmount
        return () => {
            // if (socket) {
            //     socket.off('pleaseSelect');
            //     socket.off('pleasePlay');
            //     socket.off('playSuccess');
            //     socket.off('updateMusicInfo');
            //     socket.off('setNext');
            // }
        };
    }, []);

    const closeModal = () => {
        setModal({ ...modal, isOpen: false });
    };

    return (
        <div>
            <Modal
                isOpen={modal.isOpen}
                onClose={closeModal}
                title={modal.title}
                message={modal.message}
            />
            {/* {playerSocket === getSocket()?.id && queue && ( */}
            {ok &&
                <TrackPlayer next={next} queue={queue} />
            }
            <button onClick={()=>setOk(true)}>ok</button>
        </div>
    );
};

export default App;