/* 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({ currSrc: nextProps.src, prevSrc: this.state.currSrc });
  },

  render: function() {

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

    return (
      <div className="crossfade-image">
        <ReactCSSTransitionGroup transitionName="crossfade" transitionLeaveTimeout={2000}>
          <div key={this.state.currSrc} className="top" style={topStyle}></div>
        </ReactCSSTransitionGroup>
      </div>
    );

  }

});