import {useState,useEffect,useRef} from "react";
import play from '../play.svg'
import pause from '../pause.svg'
import {store,actionTrackPlay,actionTrackStop} from "../reducers";
import {connect} from "react-redux";
import {backURL} from "../actions";


export const Track = ({track:{id,url,originalFileName}}) => {

    let audioSrc = backURL + '/'+ url
    const [isPlaying, setIsPlaying] = useState(false);
    const audioRef = useRef(new Audio(audioSrc));

    useEffect(() => {
        if (isPlaying) {
            audioRef.current.play();
        } else {
            audioRef.current.pause();
        }
    }, [isPlaying]);

    return (
        <div className='Tracks'>
            {isPlaying ? (
                <button onClick={() => setIsPlaying(false)}>
                    <img src={pause}/>
                </button>
            ) : (
                <button onClick={() => setIsPlaying(true)}>
                    <img src={play}/>
                </button>
            )}
            <span>{originalFileName}</span>
        </div>
    )
}



export const CTrack = connect(null, {trackPlay: actionTrackPlay, trackStop: actionTrackStop})(Track)