import React from 'react'

import Select from 'react-select-plus';
import 'react-select-plus/dist/react-select-plus.css';

var options = [{
	label: 'Black',
	value: 'black',
}, {
	label: 'Primary Colors',
	options: [{
		label: 'Yellow',
		value: 'yellow'
	}, {
		label: 'Red',
		value: 'red'
	}, {
		label: 'Blue',
		value: 'blue'
	}]
}, {
	label: 'Secondary Colors',
	options: [{
		label: 'Orange',
		value: 'orange'
	}, {
		label: 'Purple',
		options: [{
			label: 'Light Purple',
			value: 'light_purple'
		}, {
			label: 'Medium Purple',
			value: 'medium_purple'
		}, {
			label: 'Dark Purple',
			value: 'dark_purple'
		}]
	}, {
		label: 'Green',
		value: 'green'
	}]
}, {
	label: 'White',
	value: 'white',
}];

class ProjectSelector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
         project: undefined,
         options: this.createOptionsList()
    }
  }

  createOptionsList() {

    var groupedProjects = [];

    this.props.projects.forEach(function(project){
        if(project.cid != undefined)
        {
          if(groupedProjects[project.cid] == null)
            groupedProjects[project.cid] = [];

          groupedProjects[project.cid].push({label: project.name, value: project.id});
        }
    });

    var options = [];
    let that = this;
    Object.keys(groupedProjects).forEach(function(key) {
      var values = groupedProjects[key];
      options.push({label: that.getClient(key).name, options: values})
    });

    return options;
  }

  getClient(id) {
        let retVal = null;

        this.props.clients.forEach(function(client) {
            if(client.id == id)
            {
                retVal = client;
                return;
            }
            
        });
        return retVal;
    }

  logChange(val) {
    console.log("Selected: " + val);
  }


  render() {
    return (
      <div>
          <Select
            name="form-field-name"
            value="one"
            options={this.state.options}
            onChange={this.logChange}
          />
      </div>
      )
  }
}

ProjectSelector.propTypes = {
  clients: React.PropTypes.array.isRequired,
  projects: React.PropTypes.array.isRequired
};


export default ProjectSelector
@@ -120,603 +120,8 @@
 ';%0A%0A
-var options = %5B%7B%0A%09label: 'Black',%0A%09value: 'black',%0A%7D, %7B%0A%09label: 'Primary Colors',%0A%09options: %5B%7B%0A%09%09label: 'Yellow',%0A%09%09value: 'yellow'%0A%09%7D, %7B%0A%09%09label: 'Red',%0A%09%09value: 'red'%0A%09%7D, %7B%0A%09%09label: 'Blue',%0A%09%09value: 'blue'%0A%09%7D%5D%0A%7D, %7B%0A%09label: 'Secondary Colors',%0A%09options: %5B%7B%0A%09%09label: 'Orange',%0A%09%09value: 'orange'%0A%09%7D, %7B%0A%09%09label: 'Purple',%0A%09%09options: %5B%7B%0A%09%09%09label: 'Light Purple',%0A%09%09%09value: 'light_purple'%0A%09%09%7D, %7B%0A%09%09%09label: 'Medium Purple',%0A%09%09%09value: 'medium_purple'%0A%09%09%7D, %7B%0A%09%09%09label: 'Dark Purple',%0A%09%09%09value: 'dark_purple'%0A%09%09%7D%5D%0A%09%7D, %7B%0A%09%09label: 'Green',%0A%09%09value: 'green'%0A%09%7D%5D%0A%7D, %7B%0A%09label: 'White',%0A%09value: 'white',%0A%7D%5D;%0A%0A
 clas
@@ -331,17 +331,53 @@
 ist() %7B%0A
+    // Group project after client id
 %0A
-
     var 
@@ -394,25 +394,24 @@
 jects = %5B%5D;%0A
-%0A
     this.pro
@@ -697,24 +697,79 @@
  %7D%0A    %7D);%0A%0A
+    // Create array with client names and its projects%0A
     var opti
@@ -1047,17 +1047,16 @@
 = null;%0A
-%0A
         
@@ -1222,21 +1222,8 @@
   %7D%0A
-            %0A
     
@@ -1253,18 +1253,16 @@
 retVal;%0A
-  
   %7D%0A%0A  l

Clean up