import React, { PropTypes } from 'react'
import { AutoSizer, VirtualScroll } from 'react-virtualized'
import styles from 'react-virtualized/styles.css'
import ArtistItem from '../ArtistItem'
import SongItem from '../SongItem'

const ROW_HEIGHT = 50

class ArtistList extends React.Component {
  static propTypes = {
    ids: PropTypes.array.isRequired,
    artists: PropTypes.object.isRequired
  }

  VirtualScroll = null
  expandedId = null
  lastStartIndex = null

  render () {
    if (!this.props.ids.length) return null

    return (
      <AutoSizer>
        {({ height, width }) => (
          <VirtualScroll
            width={width}
            height={height}
            ref={(c) => {this.VirtualScroll = c}}
            rowCount={this.props.ids.length}
            rowHeight={this.rowHeight.bind(this)}
            rowRenderer={this.rowRenderer.bind(this)}
            onRowsRendered={this.handleRowsRendered.bind(this)}
            scrollToIndex={this.lastStartIndex}
            scrollToAlignment="start"
            overscanRowCount={10}
          />
        )}
      </AutoSizer>
    )
  }

  handleArtistClick(artistId, event) {
    event.stopPropagation()
    this.expandedId = (artistId === this.expandedId) ? null : artistId

    this.VirtualScroll.recomputeRowHeights()
    this.VirtualScroll.forceUpdate()
  }

  handleSongClick(uid, event) {
    console.log(uid)
    // event.stopPropagation()

    // this.VirtualScroll.recomputeRowHeights()
    // this.VirtualScroll.forceUpdate()
  }

  handleRowsRendered({startIndex}) {
    this.lastStartIndex = startIndex
  }

  componentWillUnmount() {
    localStorage.setItem('lastStartIndex', this.lastStartIndex)
  }

  componentWillMount() {
    this.lastStartIndex = localStorage.getItem('lastStartIndex')
  }

  rowRenderer({index}) {
    let artist = this.props.artists[this.props.ids[index]]
    let children = []

    if (this.expandedId === artist.id){
      artist.children.forEach(function(song, i) {
        children.push(
          <SongItem
            key={song.uid}
            title={song.title}
            plays={song.plays}
            onSelectSong={this.handleSongClick.bind(this, song.uid)}
          />
        )
      }, this)
    }

    return (
      <ArtistItem
        key={artist.id}
        name={artist.name}
        count={artist.children.length}
        onArtistSelect={this.handleArtistClick.bind(this, artist.id)}
        isExpanded={artist.id === this.expandedId}
      >
        {children}
      </ArtistItem>
    )
  }

  rowHeight({index}) {
    let rows = 1

    if (this.expandedId === this.props.artists[this.props.ids[index]].id) {
      rows += this.props.artists[this.props.ids[index]].children.length
    }

    return rows * ROW_HEIGHT
  }
}

export default ArtistList

@@ -460,16 +460,159 @@
 = null%0A%0A
+  rowRenderer = this.rowRenderer.bind(this)%0A  handleRowsRendered = this.handleRowsRendered.bind(this)%0A  rowHeight = this.rowHeight.bind(this)%0A%0A
   render
@@ -938,27 +938,16 @@
 owHeight
-.bind(this)
 %7D%0A      
@@ -981,27 +981,16 @@
 Renderer
-.bind(this)
 %7D%0A      
@@ -1034,27 +1034,16 @@
 Rendered
-.bind(this)
 %7D%0A      

Remove bind calls from render()