/* jshint node: true jsx: true */
var React = require('react');
var AnimateMixin = require('../mixins/animate');

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 = {};

    if(this.state.prevSrc) {
      topStyle.backgroundImage = 'url('+this.state.prevSrc+')';
    }

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

    return (
      <div className="crossfade-image">
        <div className="bottom" style={bottomStyle}></div>
        <div ref="top" className="top" style={topStyle}></div>
      </div>
    );

  },

  componentDidUpdate: function() {
    this.transition(this.refs.top, {opacity: {start: 1, end: 0}}, '5s', 'ease-in-out');
  }

});