var React = require('react');
var Util = require('../util');
var LazyLoad = require('./mixins/lazy-load');

var LOADING_ICON = 'img/hourglass.svg';

module.exports = React.createClass({

  mixins: [LazyLoad],

  getInitialState: function() {
    return { icon: LOADING_ICON, currentTheme: undefined };
  },

  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(desktopEntry.Icon, newTheme);

  },

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

  render: function() {

    var desktopEntry = this.props.desktopEntry;
    var label = desktopEntry.Name;
    var category = desktopEntry.Categories;

    return (
      <li className="desktop-app">
        <img src={this.state.icon} className="desktop-app-icon" />
        <span className="desktop-app-label">{label}</span>
      </li>
    );

  },

  _findIcon: function(iconPath, theme) {

    var self = this;
    var DEFAULT_ICON = 'application-default-icon';

    console.log('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) {
        global.window.requestAnimationFrame(function() {
          self.setState({ icon: iconPath });
        });
      })
    ;

  }

});