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 ToolbarProviderComponent from './Toolbar';

export default class Page extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
  }

  state = {
    newProviders: [],
  }

  handleProvidersReceived = (providers) => {
    if (providers && providers.length > 0) {
      this.setState(Object.assign(this.state, { newProviders: providers }));
    }
  }

  render() {
    return (
      <section className="container-fluid with-maxwidth">
        <QueueAnim type="bottom" className="ui-animate">
          <div key="1"><h2 className="article-title">Participating Providers</h2>
            <ToolbarProviderComponent onProvidersReceived={this.handleProvidersReceived} />
            <Datatable providerChange={this.state.newProviders} />
          </div>
        </QueueAnim>
      </section>
    );
  }
}

module.exports = Page;
