import play from '../play.svg'
import pause from '../pause.svg'
import {actionTrackPlay,actionTrackStop,actionSetPlaylist} from "../reducers";
import {connect} from "react-redux";


export const Track = ({playlist,track:{_id,url,originalFileName},trackIndex,
                          trackPlay,trackStop,setPlaylist}) => {
    // let audioSrc = backURL + '/'+ url
// console.log(playlist,'iz track')
    return (
        <div className='Tracks'>
                <button onClick={() => {
                    setPlaylist(playlist,trackIndex);
                }}>
                    <img src={play} alt='play'/>
                </button>
                <button onClick={() => trackStop()}>
                    <img src={pause} alt='pause'/>
                </button>
            <span>{originalFileName}</span>
        </div>
    )
}



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