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, currentTheme: '' };
  },

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

  updateIconIfInViewport: function() {

    var currentTheme = this.state.currentTheme;
    var newTheme = this.props.theme;

    if( !this.isInViewport() ||  newTheme === currentTheme ) return;

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

    var desktopEntry = this.props.desktopEntry;

    this._findIcon(this.props.icon, newTheme);

  },

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

  render: function() {

    var icon = this.state.icon;

    return (
      <img src={icon} className="app-icon" />
    );

  },

  _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 || /\.xpm$/.test(iconPath) ) {
          return Util.DesktopApps.findIcon(DEFAULT_ICON, theme);
        }
        return iconPath;
      })
      .then(function(iconPath) {
        self.setState({ icon: iconPath });
      })
    ;

  }

});