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


export const Player = ({player:{volume,duration,currentTime},
                                trackPlay, trackStop,trackVolume,trackCurrentTime}) => {
    return (
        <div className='Player'>

            <input className='currentTime'
                type="range"
                min={0}
                step={0.1}
                max={duration ? duration : `${duration}`}
                onChange={(e) => trackCurrentTime(e.target.value)}
                value={currentTime}/>

            <button><img src={prev}/></button>

            <button onClick={() => trackPlay()}>
                <img src={play}/></button>

            <button onClick={() => trackStop()}>
                <img src={pause}/></button>

            <button><img src={next}/></button>
            <input
                type="range"
                min={0}
                step={0.1}
                max={1}
                onChange={(e) => trackVolume(e.target.value)}
                value={volume}/>
        </div>
    )
}

export const CPlayer = connect(state => ({player: state.player}),
    {trackPlay: actionTrackPlay,
                     trackStop: actionTrackStop,
                     trackVolume:actionTrackVolume,
                     trackCurrentTime:actionTrackCurrentTime})(Player)