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:{originalFileName},trackIndex,
                          trackStop,setPlaylist}) => {

    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)