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

module.exports = React.createClass({

  mixins: [LazyLoad],

  getInitialState: function() {
    return { icon: 'img/hourglass.svg', loading: false };
  },

  onInViewport: function() {
    if(!this.state.loading) {
      this.setState({ loading: true });
      var desktopEntry = this.props.desktopEntry;
      this._findIcon(desktopEntry.Icon);
    }
  },

  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) {

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

    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 });
      })
    ;

  }

});