import React from 'react';
import IconMenu from 'material-ui/IconMenu';
import IconButton from 'material-ui/IconButton';
import FontIcon from 'material-ui/FontIcon';
import NavigationExpandMoreIcon from 'material-ui/svg-icons/navigation/expand-more';
import MenuItem from 'material-ui/MenuItem';
import DropDownMenu from 'material-ui/DropDownMenu';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle } from 'material-ui/Toolbar';
import OrganizationComponent from './OrganizationComponent';
import Instance from '../../../../../../../components/Connection';

class ToolbarOrganization extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      selectedType: {
        name: 'All Organizations',
        key: '',
        desc: '',
      },
      typeList: [],
      baseSearch: {
        name: 'All Organizations',
        key: '',
        desc: '',
      },
    };

    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    const self = this;
    Instance.getRawConn().get('/v1/nemt/organization/type').then(res => {
      const typeList = res.data.map((v, i) => {
        return (<MenuItem value={v} primaryText={v.name} />);
      });

      self.setState(Object.assign(self.state, { typeList: typeList, selectedType: self.state.baseSearch }));
      console.log(self.state);
      if (self.props.onChange) {
        self.props.onChange(self.state.selectedType);
      }
    }).catch(console.error);
  }

  handleChange(event, index, value) {
    this.setState(Object.assign(this.state, { selectedType: value }));
    if (this.props.onChange) {
      this.props.onChange(value);
    }
  }

  render() {
    return (
      <Toolbar>
        <ToolbarGroup firstChild>
          <DropDownMenu value={this.state.selectedType} openImmediately={false} onChange={this.handleChange} primary icon={<ContentAdd />} >
            <MenuItem value={this.state.baseSearch} primaryText={"All Organizations"} />
            {this.state.typeList}
          </DropDownMenu>
          <OrganizationComponent title={"Add Organization"} buttonValue={"Add Organization"} />
        </ToolbarGroup>
      </Toolbar>
    );
  }
}

class ToolbarSection2 extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(value) {
    if (this.props.onChange) {
      this.props.onChange(value);
    }
  }

  render() {
    return (<ToolbarOrganization onChange={this.handleChange} />);
  }
}

module.exports = ToolbarSection2;
