var React = require('react');
var Util = require('../util');

module.exports = React.createClass({

  propsType: {
    onThemeSelected: React.PropTypes.func.isRequired,
  },

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

  componentDidMount: function() {
    Util.DesktopApps.findIconThemes()
      .then(function(themes) {
        this.setState({ availableThemes: themes });
      }.bind(this))
    ;
  },

  onChange: function(evt) {
    var selectedTheme = evt.target.value;
    this.setState({ selectedTheme: selectedTheme });
    this.props.onThemeSelected(selectedTheme);
  },

  render: function() {

    var selectedTheme = this.state.selectedTheme;
    var options = this.state.availableThemes.map(function(theme) {
      return (
        <option key={theme} value={theme}>{theme}</option>
      );
    });

    return (
      <select value={selectedTheme} onChange={this.onChange}>
        {options}
      </select>
    );

  }

});