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


export const Track = ({playlist=['fdgdf','dgdfgfd','dgdfgdfgdf'],track:{_id,url,originalFileName},
                          trackPlay,trackStop,setPlaylist}) => {

    let audioSrc = backURL + '/'+ url

    return (
        <div className='Tracks'>
                <button onClick={() => {
                    trackPlay(audioSrc);
                    // setTimeout(setPlaylist(playlist),5000)
                      setPlaylist()
                }}>
                    <img src={play}/>
                </button>
                <button onClick={() => trackStop()}>
                    <img src={pause}/>
                </button>
            <span>{originalFileName}</span>
        </div>
    )
}



export const CTrack = connect(state => ({playlist: state.promise.playlistById?.payload?.tracks || []}),
    {trackPlay: actionTrackPlay, trackStop: actionTrackStop,setPlaylist:actionSetPlaylist})(Track)