class Player extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isPlay: null,
      currDuration: 0,
      percentage: 0,
      seekBar: 0
    };
    this.audioFile = React.createRef();
    this.audioSeekBar = React.createRef();
    this.getCurrDuration = this.getCurrDuration.bind(this);
    this.controlAudio = this.controlAudio.bind(this);
    this.onClick = this.onClick.bind(this);
    this.onKeyDown = this.onKeyDown.bind(this);
  }

  getCurrDuration() {
    const audio = this.audioFile.current;
    const percentage = ((audio.currentTime / audio.duration) * 100).toFixed(2);

    // get current percentage and duration
    this.setState({
      currDuration: audio.currentTime,
      percentage
    });
  }

  controlAudio() {
    const audio = this.audioFile.current;
    if (audio.duration > 0 && !audio.paused) {
      // pause audio and stop counting
      audio.pause();
      this.setState({
        isPlay: false
      });
    } else {
      // play audio
      audio.play();
      this.setState({
        isPlay: true
      });
    }
  }

  onKeyDown(e) {
    // when user focus in audio slider and clicks keys inside key list, will change current time of audio
    const audio = this.audioFile.current;
    const isLeft = 37;
    const isRight = 39;
    const isTop = 38;
    const isBottom = 40;
    const isHome = 36;
    const isEnd = 35;
    const keyList = [isLeft,isRight,isTop,isBottom,isHome,isEnd];

    if (keyList.indexOf(e.keyCode) >= 0) {
      let percentage;
        switch(e.keyCode) {
          case isLeft:
            percentage = parseFloat(this.state.percentage) - 1
            break;
          case isRight:
            percentage = parseFloat(this.state.percentage) + 1
            break;
          case isTop:
            percentage = parseFloat(this.state.percentage) + 10
            break;
          case isBottom:
            percentage = parseFloat(this.state.percentage) - 10
            break;
          case isHome:
            percentage = 0
            break;
          case isEnd:
            percentage = 99.9 // 100 would trigger onEnd, so only 99.9
            break;
          default:
            break;
        }
      
       // add boundary for percentage, cannot be bigger than 100 or smaller than zero
      if(percentage > 100) {
        percentage = 100
      } else if(percentage < 0) {
        percentage = 0
      }
        
        this.setState({
          percentage
        });

        audio.currentTime = audio.duration * (percentage / 100);
    }
  }

  onClick(e) {
    const seekBar = this.audioSeekBar.current;
    const audio = this.audioFile.current;

    const pos =
      (e.pageX -
        (seekBar.getBoundingClientRect().x ||
          seekBar.getBoundingClientRect().left)) /
      seekBar.getClientRects()[0].width;

    this.setState({
      percentage: pos * 100
    });

    audio.currentTime = audio.duration * pos;
  }

  render() {
    const { percentage, isPlay } = this.state;
    const { path, image } = this.props;
    return (
      <React.Fragment>
        <div className="u-bg" style={{ backgroundImage: `url("${image}")` }}>
          <div className="c-audio" aria-label="Audio Player" role="region">
            <button
              title={!isPlay || isPlay === null ? 'Play' : 'Pause'}
              className={
                !isPlay || isPlay === null
                  ? 'c-audio u-btn l-play l-play__play'
                  : 'c-audio u-btn l-play l-play__pause'
              }
              aria-controls="audio1"
              onClick={this.controlAudio}
              aria-label={!isPlay || isPlay === null ? 'Play' : 'Pause'}
            />
            <div
              className="c-audio__slider"
              onKeyDown={this.onKeyDown}
              onClick={this.onClick}
              tabIndex="0"
              aria-valuetext="seek audio bar"
              aria-valuemax="100"
              aria-valuemin="0"
              aria-valuenow={Math.round(percentage)}
              role="slider"
              ref={this.audioSeekBar}
            >
              <div className="c-audio__length">
                <svg
                  className="c-audio__bar"
                  viewBox="0 0 100% 6"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <rect x="0" width={percentage + '%'} height="6" rx="3" />
                </svg>
              </div>
            </div>
          </div>
        </div>

        <audio
          className="c-audio__sound"
          id="audio1"
          src={path}
          onTimeUpdate={this.getCurrDuration}
          onEnded={() => {
            this.audioFile.current.currentTime = 0;
            this.setState({
              isPlay: false,
              currentTime: 0,
              percentage: 0
            });
          }}
          ref={this.audioFile}
        >
          <track kind="captions" />
        </audio>
      </React.Fragment>
    );
  }
}

Player.propTypes = {
  path: PropTypes.string,
  image: PropTypes.string
};

class App extends React.Component {
  render() {
    return (
      <Player
        path="//cdn.atrera.com/audio/Marcel_Pequel_-_01_-_One.mp3"
        image="//cdn.atrera.com/images/cover_yz2mak.jpg"
      />
    );
  }
}


ReactDOM.render(<App />, document.getElementById("index"));