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

    options.unshift(
      <option key="__none__"></option>
    );

    return (
      <div className="icon-theme-selector">
        <select className="form-control" value={selectedTheme} onChange={this.onChange}>
          {options}
        </select>
      </div>
    );

  }

});