/* jshint node: true */
var React = require('react');
var AnimateMixin = require('../mixins/animate');
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

module.exports = React.createClass({

  mixins: [AnimateMixin],

  propTypes: {
    src: React.PropTypes.string
  },

  getInitialState: function() {
    return { currSrc: null, prevSrc: null };
  },

  componentWillReceiveProps: function(nextProps) {
    this.setState({ nextSrc: nextProps.src, currSrc: this.state.currSrc });
  },

  render: function() {

    var topStyle = {
      backgroundImage: 'url('+this.state.currSrc+')'
    };

    var bottomStyle = {
      backgroundImage: 'url('+this.state.nextSrc+')',
    };

    var bottom = this.state.nextSrc ?
      <div key={this.state.nextSrc} className="bottom" style={bottomStyle}></div> :
      null
    ;

    var top = this.state.currSrc ?
      <div key={this.state.currSrc} className="top" style={topStyle}></div> :
      null
    ;

    return (
      <div className="crossfade-image" {...this.props}>
        {bottom}
        <ReactCSSTransitionGroup transitionName="crossfade" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
          {top}
        </ReactCSSTransitionGroup>
      </div>
    );

  },

  componentDidUpdate: function() {
    if(this.state.nextSrc !== this.state.currSrc) {
      this.setState({ currSrc: this.state.nextSrc });
    }
  }

});