var React = require('react');
var Util = require('../../util');
var LazyLoad = require('../mixins/lazy-load');
var debug = Util.Debug('common:app-icon');

var LOADING_ICON = 'img/hourglass.svg';
var DEFAULT_ICON = 'img/default-icon.svg';

module.exports = React.createClass({

  mixins: [LazyLoad],

  getInitialState: function() {
    return { icon: DEFAULT_ICON, iconPath: DEFAULT_ICON, currentTheme: '' };
  },

  onInViewport: function() {
    this.updateIconIfInViewport();
  },

  updateIconIfInViewport: function() {

    var currentIcon = this.state.icon;
    var newIcon = this.props.icon;
    var currentTheme = this.state.currentTheme;
    var newTheme = this.props.theme;

    var shouldUpdate = this.isInViewport() &&
      ( (newTheme && newTheme !== currentTheme) || (newIcon && newIcon !== currentIcon) )
    ;

    if( !shouldUpdate ) return;

    this.setState({ icon: newIcon, iconPath: LOADING_ICON, currentTheme: newTheme });

    this._findIcon(newIcon, newTheme);

  },

  componentDidUpdate: function() {
    this.updateIconIfInViewport();
  },

  render: function() {

    var icon = this.state.iconPath;

    var style = {
      backgroundImage: 'url('+icon+')'
    };

    return (
      <div className="app-icon" style={style}></div>
    );

  },

  _findIcon: function(iconPath, theme) {

    var self = this;

    debug('Search icon %s:%s', iconPath, theme);

    Util.DesktopApps.findIcon(iconPath || DEFAULT_ICON, theme)
      .then(function(iconPath) {
        if(!iconPath) return DEFAULT_ICON;
        return Util.System.exists(iconPath)
          .then(function(exists) {
            return exists ? iconPath : DEFAULT_ICON;
          })
        ;
      })
      .then(function(iconPath) {
        debug('Found icon %s', iconPath);
        self.setState({ iconPath: iconPath });
      })
    ;

  }

});