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


export const Track = ({player:{isPlaying,track}={},
                          playlist,
                          trackP={},trackIndex,
                          trackStop,setPlaylist}) => {

   const {originalFileName} = trackP
    return (
        <div className='Tracks'>
            {!isPlaying || trackP !==track  ?
                (<button onClick={() => {
                    setPlaylist(playlist,trackIndex,trackP);
                }}>
                    <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 || [], player: state.player}),
    {trackPlay: actionTrackPlay, trackStop: actionTrackStop,setPlaylist:actionSetPlaylist})(Track)