import React from "react";
import SelectField from "material-ui/SelectField";
import MenuItem from "material-ui/MenuItem";

const names = [
  "Oliver Hansen",
  "Van Henry",
  "April Tucker",
  "Ralph Hubbard",
  "Omar Alexander",
  "Carlos Abbott",
  "Miriam Wagner",
  "Bradley Wilkerson",
  "Virginia Andrews",
  "Kelly Snyder"
];

class App extends React.Component {
  state = {
    values: []
  };

  handleChange = (event, key, values) => {
    this.setState({ values });
  };

  selectionRenderer = values => {
    // change the default comma separated rendering
    return (
      <span style={{ color: "#ff4081" }}>
        {values.join("; ")}
      </span>
    );
  };

  menuItems(values) {
    return names.map(name => (
      <MenuItem
        key={name}
        insetChildren={true}
        checked={values.includes(name)}
        value={name}
        primaryText={name}
      />
    ));
  }

  render() {
    const { values } = this.state;
    const floatingLabelText = "Names" +
      (values.length > 1 ? ` (${values.length})` : "");
    return (
      <SelectField
        multiple={true}
        floatingLabelText={floatingLabelText}
        value={values}
        onChange={this.handleChange}
        selectionRenderer={this.selectionRenderer}
      >
        {this.menuItems(values)}
      </SelectField>
    );
  }
}

export default App;