export default class AudioPlayer {
  constructor() {
    this._context = ( () => {
      const audioContext = ( window.AudioContext || window.webkitAudioContext );
      if( audioContext ) { return new audioContext(); }

      throw new Error( 'Web Audio API is not supported.' );
    } )();

    this._audio = null;

    this._sourceNode = null;

    this._gainNode = this._context.createGain();
    this._gainNode.gain.value = 1.0;
    this._gainNode.connect( this._context.destination );

    this._analyserNode = this._context.createAnalyser();
    this._analyserNode.fftSize = 64;
    this._analyserNode.connect( this._gainNode );

    this._isPlaying = false;
  }

  get spectrums() {
    if( !( this._sourceNode && this._isPlaying ) ) { return null; }

    const spectrums = new Uint8Array( this._analyserNode.frequencyBinCount );
    this._analyserNode.getByteFrequencyData( spectrums );

    return spectrums;
  }
}

const MAX_SPECTRUM = 255;

export default class SpectrumAnalyzer extends React.Component {
  constructor( props ) {
    super( props );

    this._canvas = null;

    this._canvasContext = null;

    this._animationId = null;

    this._playbackStateBefore = props.audioPlayerStore.playbackState;
  }

  componentDidMount() {
    this._canvas        = this.refs.canvas;
    this._canvasContext = this._canvas.getContext( '2d' );

    this._canvasContext.scale( window.devicePixelRatio, window.devicePixelRatio );
  }

  componentWillUnmount() {
    this._stopSpectrumAnayzer();
  }

  render() {
    // Update spectrum analyzer
    const playbackStateNow = this.props.audioPlayerStore.playbackState;
    if( this._playbackStateBefore !== playbackStateNow ) {
      if( playbackStateNow === PlaybackState.Stopped ) {
        this._stopSpectrumAnalyzer();
      } else {
        this._startSpectrumAnalyzer();
      }

      this._playbackStateBefore = playbackStateNow;
    }

    const style = { display: this.props.useSpectrumAnalyzer ? 'block' : 'none' };
    return (
      <div
        className="audio-player__container__info__container__spectrum-analyzer"
        style={ style }
        onClick={ this.props.onClickInfoDisplay }>
        <canvas ref="canvas">
        </canvas>
      </div>
    );
  }

  _drawBackground( spectrums, baseX, width ) {
    this._canvasContext.fillStyle = '#ecf0f1';
    this._canvasContext.fillRect( 0, 0, width, this._canvas.height );

    for( let i = 1, max = spectrums.length; i < max; ++i ) {
      this._canvasContext.fillRect( i * baseX, 0, width, this._canvas.height );
    }
  }

  _drawGraph( spectrums, baseX, width ) {
    let percent = spectrums[ 0 ] / MAX_SPECTRUM;
    let height  = this._canvas.height * percent;
    let y       = this._canvas.height - height;

    this._canvasContext.fillStyle = '#bdc3c7';
    this._canvasContext.fillRect( 0, y, width, height );

    for( let i = 1, max = spectrums.length; i < max; ++i ) {
      percent = spectrums[ i ] / MAX_SPECTRUM;
      height  = this._canvas.height * percent;
      y       = this._canvas.height - height;

      this._canvasContext.fillRect( i * baseX, y, width, height );
    }
  }

  _startSpectrumAnalyzer() {
    const spectrums = this.props.audioPlayerStore.spectrums;
    if( !( spectrums ) ) { return; }

    this._adjustCanvasSize();
    this._canvasContext.clearRect( 0, 0, this._canvas.width, this._canvas.height );

    const max   = spectrums.length;
    const width = ( this._canvas.width / max ) / 2;
    const baseX = width * 2;

    this._drawBackground( spectrums, baseX, width );
    this._drawGraph( spectrums, baseX, width );

    this._animationId = requestAnimationFrame( this._startSpectrumAnalyzer.bind( this ) );
  }

  _stopSpectrumAnalyzer() {
    this._canvasContext.clearRect( 0, 0, this._canvas.width, this._canvas.height );
    cancelAnimationFrame( this._animationId );
  }

  _adjustCanvasSize() {
    const width  = this._canvas.offsetWidth  * window.devicePixelRatio;
    const height = this._canvas.offsetHeight * window.devicePixelRatio;
    if( this._canvas.width  !== width  ) { this._canvas.width  = width;  }
    if( this._canvas.height !== height ) { this._canvas.height = height; }
  }
}

export default class Artist {
  static compare( a, b ) {
    const nameA = a.name.toLowerCase().replace( 'the ', '' );
    const nameB = b.name.toLowerCase().replace( 'the ', '' );

    return ( nameA === nameB ? 0 : ( nameA < nameB ? -1 : 1 ) );
  }
}

export default class AlbumList extends React.Component {
  _renderMusics( musics ) {
    const currentMusic = this.props.context.musicListStore.currentMusic;
    const currentPlay  = this._getCurrentPlay();

    // Group by disc number
    const discs = {};
    musics.forEach( ( music ) => {
      if( discs[ music.disc ] === undefined ) {
        discs[ music.disc ] = [];
      }

      discs[ music.disc ].push( music );
    } );

    // Multi disc
    const keys = Object.keys( discs );
    if( 1 < keys.length ) {
      const results = [];
      keys.forEach( ( key ) => {
        results.push( (
          <div key={ key } className="album-list__item__body__disc">
            Disc { key }
          </div>
        ) );

        discs[ key ].forEach( ( music ) => {
          results.push( this._renderMusic( music, currentMusic, currentPlay ) );
        } );
      } );

      return results;
    }

    // Single disc
    return musics.map( ( music ) => {
      return this._renderMusic( music, currentMusic, currentPlay );
    } );
  }
}

export default class Music {
  static compare( a, b ) {
    if( a.disc !== b.disc ) {
      return ( a.disc < b.disc ? -1 : 1 );
    }

    return ( a.track === b.track ? 0 : ( a.track < b.track ? -1 : 1 ) );
  }
}