import React from 'react';
import Sound from 'react-sound';
import {formatDuration} from './utils.js';

export default function Controls(props) {
  const playPause = (props.playStatus === Sound.status.PLAYING ? 'pause' : 'play');
  const percent = (props.duration ? (100 * props.position / props.duration) : 0);
  const elapsed = (props.position ? formatDuration(props.position/1000) : '');
  const duration = (props.duration ? formatDuration(props.duration/1000) : '');
  if (props.visible === false) {
    return null;
  }
  return (
      <div className="Controls">
        <div className="Controls-progress">
          <div className="Controls-bar" style={{width:percent+'%'}} />
          <span className="Controls-elapsed">{elapsed}</span>
          <span className="Controls-duration">{duration}</span>
        </div>
        <div className="Controls-title">{props.title}</div>
        <div className="Controls-buttons">
          <button onClick={props.onPrev}>prev</button>
          <button onClick={props.onPlayPause}>{playPause}</button>
          <button onClick={props.onStop}>stop</button>
          <button onClick={props.onNext}>next</button>
        </div>
      </div>
  );
}