class AudioPlayer extends React.Component {

  constructor(props) {
    super(props);
    this.media = React.createRef();
    this.percentage = React.createRef();
    this.seekObj = React.createRef();
    this.currentTime = React.createRef();
  }

  state = {
    isPlaying: false
  };

togglePlay = () => {
  let audioIsPlaying = this.media.current.currentTime > 0 && !this.media.current.paused && this.media.current.readyState > 2;

  if (!audioIsPlaying) {
    this.media.current.play();
  } else {
    this.media.current.pause();
  }

  this.setState({
    isPlaying: !this.state.isPlaying
  });

};

calculatePercentPlayed = () => {
  let percentPlayed = (this.media.current.currentTime / this.media.current.duration).toFixed(2) * 100;
  this.percentage.current.style.width = `${percentPlayed}%`;
}

calculateCurrentValue = (currentTime) => {
  const currentMinute = parseInt(currentTime / 60) % 60;
  const currentSecondsLong = currentTime % 60;
  const currentSeconds = currentSecondsLong.toFixed();
  const currentTimeFormatted = `${currentMinute < 10 ? `0${currentMinute}` : currentMinute}:${
  currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds
  }`;

  return currentTimeFormatted;
}

initProgressBar = () => {
  const media = this.media.current;
  const currentTime = this.calculateCurrentValue(media.currentTime);

  function seek(e) {
    const percent = e.offsetX / this.offsetWidth;
    media.currentTime = percent * media.duration;
  }

  this.currentTime.current.innerHTML = currentTime;
  this.seekObj.current.addEventListener('click', seek);
  this.calculatePercentPlayed();
}

onEnded = () => {
  this.percentage.current.style.width = 0;
  this.currentTime.current.innerHTML = '00:00';

  this.setState({
    isPlaying: false
  });
}

render() {
  const { src } = this.props;
  const isPlaying = this.state.isPlaying;

  return (

    <div className="audio-player">

      <audio ref={this.media} onTimeUpdate={this.initProgressBar} onEnded={this.onEnded} id="audio">
        <source src={src} type="audio/mp3" />
      </audio>

      <div className="player-controls">

        <div id="radioIcon"></div>

        <button onClick={this.togglePlay} className={ isPlaying == false ? 'play' : 'pause'} id="playAudio"></button>

        <div id="seekObjContainer">
          <div ref={this.seekObj} id="seekObj">
            <div id="percentage" ref={this.percentage}></div>
          </div>
        </div>

        <p><small id="currentTime" ref={this.currentTime}>00:00</small></p>

      </div>
    </div>
  );
}
}

class App extends React.Component {

  render() {
    const audioFile = "https://thenewcode.com/assets/audio/24-ghosts-III.mp3";

    return (
      <AudioPlayer src={audioFile} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));