var React = require('react');
var connect = require('react-redux').connect;
var ProfileTree = require('./profile-tree.js');
var DesktopAppList = require('./desktop-app-list.js');
var ItemForm = require('./item-form.js');
var IconThemeSelector = require('./icon-theme-selector.js');
var ProfileMenu = require('./profile-menu.js');

var actions = require('../../store/actions');
var DragDropContext = require('react-dnd').DragDropContext;
var HTML5Backend = require('react-dnd-html5-backend');

var EditView = React.createClass({

  componentDidMount: function() {
    this.props.dispatch(actions.edit.loadDesktopApps());
  },

  render: function() {

    return (
      <div className="edit">
        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
        <div className="menu-bar">
          <div className="left">
            <ProfileMenu />
          </div>
          <div className="main">
            <div className="full-width">
              <button className="btn btn-primary pull-right btn-sm" onClick={this.handleAddNewNode}>Ajouter un noeud</button>
            </div>
          </div>
          <div className="right"></div>
        </div>
        <div className="workspace">
          <div className="left">
            <div className="apps-menu">
              <b className="title">Thème</b>
              <IconThemeSelector onThemeSelected={this.handleThemeSelect} />
              <b className="title">Applications</b>
              <DesktopAppList
                theme={this.props.theme}
                desktopApps={this.props.desktopApps}
                onItemDropped={this.handleItemDrop} />
            </div>
          </div>
          <div className="main">
            <b className="title">Arbre de profil</b>
            <ProfileTree />
          </div>
          <div className="right">
            <b className="title">Édition</b>
            <ItemForm item={this.props.selectedItem} onItemChange={this.handleItemChange} />
          </div>
        </div>
      </div>
    );

  },

  handleItemDrop: function(desktopEntry, targetItem) {

    var newProfileItem = {
      label: desktopEntry.Name,
      icon: desktopEntry.Icon,
      exec: desktopEntry.Exec
    };

    this.props.dispatch(actions.edit.addProfileItem(newProfileItem, targetItem));

  },

  handleThemeSelect: function(theme) {
    this.props.dispatch(actions.edit.useIconTheme(theme));
  },

  handleItemChange: function(item, key, value) {
    this.props.dispatch(actions.edit.updateProfileItem(item, key, value));
  },

  handleAddNewNode: function() {
    var newItem = {
      label: 'Nouveau noeud',
      icon: '',
      exec: '',
      background: ''
    };
    this.props.dispatch(actions.edit.addProfileItem(newItem, this.props.profile));
  }

});

function select(state) {
  return {
    desktopApps: state.desktopApps,
    profile: state.profile,
    theme: state.theme,
    selectedItem: state.selectedItem
  };
}

module.exports = DragDropContext(HTML5Backend)(connect(select)(EditView));