import React from 'react';
import QueueAnim from 'rc-queue-anim';
import Datatable from './Datatable';
import FlatButton from 'material-ui/FlatButton';
import BottomNavigationExampleSimple from '../../../../ui/routes/components/components/BottomNavigation';
import IconButton from 'material-ui/IconButton';
import ToolbarSection from './Toolbar';

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      organizationType: {}
    }

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

  handleChange(value) {
    this.setState(Object.assign(this.state, { organizationType: value }));
  }

  render() {
    return (<section className="container-fluid with-maxwidth  padding-sm-v">
      <h2 className="article-title" style={{ paddingTop: 15 }}> Manage Organizations </h2>
      <QueueAnim type="bottom" className="ui-animate">
        <div key="1">
          <ToolbarSection onChange={this.handleChange} />
        </div>
        <div key="2">
          <Datatable orgType={this.state.organizationType} />
        </div>

      </QueueAnim>
    </section>)
  }
}

module.exports = Page;
