import React from 'react';
import ReactDOM from 'react-dom';

//import PhotoStore from './../stores/photo-store';
//import PhotoActions from './../actions/photo-actions';

import Picture from './picture';
import PictureDetail from './picture-detail';
import PictureDiff from './picture-diff';

class Library extends React.Component {
  static propTypes = {
    setScrollTop: React.PropTypes.func.isRequired,
    actions: React.PropTypes.object.isRequired,
    //getPhotos: React.PropTypes.func.isRequired,
    photos: React.PropTypes.array.isRequired
  }

  constructor(props) {
    super(props);
    this.state = { highlighted: [], current: null, scrollTop: 0, diff: false };

    //this.updateCurrent = this.updateCurrent.bind(this);
  }

  handleCurrent(currentPhoto) {
    let state = this.state;

    state.diff = false;

    this.props.photos.forEach((photo, index) => {
      if (photo.id == currentPhoto.id)
        state.current = index;
    });

    if (state.current)
      state.scrollTop = ReactDOM
        .findDOMNode(this)
        .parentNode
        .scrollTop;

    this.setState(state);
  }

  componentDidUpdate() {
    let state = this.state;

    if (!state.current && state.scrollTop > 0) {
      this.props.setScrollTop(state.scrollTop);
      state.scrollTop = 0;
      this.setState(state);
    }
  }

  handleLeftCurrent() {
    let state = this.state;
    let photos = this.props.photos;

    state.diff = false;

    if (photos.indexOf(state.current) >= 1) {
      state.current = photos[photos.indexOf(state.current) - 1];
      this.setState(state);
    }
  }

  handleRightCurrent() {
    let state = this.state;
    let photos = this.props.photos;

    state.diff = false;

    if (photos.length > photos.indexOf(state.current) + 1) {
      state.current = photos[photos.indexOf(state.current) + 1];
      this.setState(state);
    }
  }

  componentDidMount() {
    //PhotoStore.listen(this.updatePhotos.bind(this));
    //PhotoActions.getPhotos();
    this.props.actions.getPhotos();
  }

  //updateCurrent() {
  //  var state = this.state;
  //  var current = this.state.current;

  //  state.diff = false;
  //  state.current = null;

  //  state.photos.forEach(function(photo) {
  //    if (photo.id == current.id)
  //      state.current = photo;
  //  });

  //  this.setState(state);
  //}

  //updatePhotos(store) {
  //  if (store.photos) {
  //    this.setState({ photos: store.photos });

  //    if (this.state.current) this.updateCurrent();
  //  }
  //}

  isLast() {
    let photos = this.props.photos;

    if (photos.length == photos.indexOf(this.state.current) + 1)
      return true;
    else if (photos.indexOf(this.state.current) == 0)
      return true;
    else
      return false;
  }

  handleFlag() {
    console.log('handle flag');
    //PhotoActions.toggleFlag(this.state.current);
  }

  handleDiff() {
    let state = this.state;
    state.diff = !this.state.diff;
    this.setState(state);
  }

  handleHighlight(photo) {
    let state = this.state;

    state.highlighted = [];
    state.highlighted.push(photo.id);

    this.setState(state);
  }

  render() {
    let currentView
      , handleCurrent = this.handleCurrent.bind(this)
      , handleLeftCurrent = this.handleLeftCurrent.bind(this)
      , handleRightCurrent = this.handleRightCurrent.bind(this)
      , isLast = this.isLast.bind(this)
      , handleFlag = this.handleFlag.bind(this)
      , handleDiff = this.handleDiff.bind(this);

    if (!this.props.photos || this.props.photos.length === 0)
      currentView = <div>Nothing!</div>;

    else if (!this.state.current)
      currentView = this.props.photos.map((photo) => {
        return (
          <Picture
            key={photo.id}
            photo={photo}
            setHighlight={this.handleHighlight.bind(this)}
            highlighted={this.state.highlighted}
            setCurrent={handleCurrent} />
        );
      });

    else if (this.state.diff)
      currentView = <PictureDiff
                      toggleDiff={handleDiff}
                      photo={this.state.current} />;

    else
      currentView = <PictureDetail
                      photo={this.props.photos[this.state.current]}
                      toggleFlag={handleFlag}
                      setCurrent={handleCurrent}
                      showDiff={handleDiff}
                      isLast={isLast}
                      setLeft={handleLeftCurrent}
                      setRight={handleRightCurrent} />;

    return (
      <div id="library">
        {currentView}
      </div>
    );
  }
}

export default Library;

@@ -59,118 +59,8 @@
 ';%0A%0A
-//import PhotoStore from './../stores/photo-store';%0A//import PhotoActions from './../actions/photo-actions';%0A%0A
 impo
@@ -563,67 +563,8 @@
 e %7D;
-%0A%0A    //this.updateCurrent = this.updateCurrent.bind(this);
 %0A  %7D
@@ -645,24 +645,50 @@
 iff = false;
+%0A    state.current = null;
 %0A%0A    this.p
@@ -1226,32 +1226,34 @@
 this.state;%0A    
+//
 let photos = thi
@@ -1290,32 +1290,34 @@
 f = false;%0A%0A    
+//
 if (photos.index
@@ -1338,32 +1338,34 @@
 nt) %3E= 1) %7B%0A    
+//
   state.current 
@@ -1405,24 +1405,116 @@
 rent) - 1%5D;%0A
+    //  this.setState(state);%0A    //%7D%0A%0A    if (state.current %3E= 1) %7B%0A      state.current--;%0A
       this.s
@@ -1655,24 +1655,26 @@
 false;%0A%0A    
+//
 if (photos.l
@@ -1714,32 +1714,34 @@
 ent) + 1) %7B%0A    
+//
   state.current 
@@ -1785,24 +1785,26 @@
 ) + 1%5D;%0A    
+//
   this.setSt
@@ -1823,643 +1823,182 @@
     
-%7D%0A  
+//
 %7D%0A%0A  
-componentDidMount() %7B%0A    //PhotoStore.listen(this.updatePhotos.bind(this));%0A    //PhotoActions.getPhotos();%0A    this.props.actions.getPhotos();%0A  %7D%0A%0A  //updateCurrent() %7B%0A  //  var state = this.state;%0A  //  var current = this.state.current;%0A%0A  //  state.diff = false;%0A  //  state.current = null;%0A%0A  //  state.photos.forEach(function(photo) %7B%0A  //    if (photo.id == current.id)%0A  //      state.current = photo;%0A  //  %7D);%0A%0A  //  this.setState(state);%0A  //%7D%0A%0A  //updatePhotos(store) %7B%0A  //  if (store.photos) %7B%0A  //    this.setState(%7B photos: store.photos %7D);%0A%0A  //    if (this.state.current) this.updateCurrent();%0A  //  %7D%0A  //
+  if (photos.length %3E state.current + 1) %7B%0A      state.current++;%0A      this.setState(state);%0A    %7D%0A  %7D%0A%0A  componentDidMount() %7B%0A    this.props.actions.getPhotos();%0A  
 %7D%0A%0A 

fix handle current