var React = require('react');
var Util = require('../../util');
var DesktopAppItem = require('./desktop-app-item.jsx');
var IconThemeSelector = require('./icon-theme-selector.jsx');
var path = require('path');
var debug = require('debug')('pitaya:desktop-app-list');

module.exports = React.createClass({

  getInitialState: function() {
    return {
      selectedTheme: null
    };
  },

  render: function() {

    var items = this.props.desktopApps.map(function(desktopApp, i) {
      var desktopEntry = desktopApp.content['Desktop Entry'];
      return <DesktopAppItem theme={this.state.selectedTheme} key={desktopApp.path} desktopEntry={desktopEntry} />;
    }.bind(this));

    return (
      <div>
        <IconThemeSelector onThemeSelected={this.onThemeSelected} />
        <ul className="desktop-apps">
          {items}
        </ul>
      </div>
    );

  },

  onThemeSelected: function(theme) {
    console.log('Selected theme %s', theme);
    this.setState({ selectedTheme: theme });
  }

});