import React, { Component } from 'react';
import { Badge, Glyphicon, Panel } from 'react-bootstrap';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { setBreadCrumbs } from '../actions/breadcrumbs';
import { fetchInstrumentScientistsBySessionId } from '../actions/instrumentscientists';
import BeamlineManagerForm from '../components/UserManagement/BeamlineManagerForm';
import InstrumentScientistTable from '../components/UserManagement/InstrumentScientistTable';

class UserManagementPage extends Component {
  componentDidMount() {
    this.props.setBreadCrumbs([{ name: 'User Management' }]);
    this.props.fetchInstrumentScientistsBySessionId(this.props.user.sessionId);
  }

  render() {
    return (
      <div className="app__inner">
        <p className="text-secondary">
          Beamline managers have access to all data, metadata and the electronic
          logbooks produced in a beamline
        </p>
        <BeamlineManagerForm
          fetchInstrumentScientistsBySessionId={
            this.props.fetchInstrumentScientistsBySessionId
          }
          user={this.props.user}
          instrumentScientists={this.props.instrumentScientists}
        />

        <Panel bsStyle="primary" style={{ marginTop: 30, marginRight: 30 }}>
          <Panel.Heading>
            <Panel.Title componentClass="h2">
              <Glyphicon glyph="user" /> Beamline Managers{' '}
              <Badge>
                {' '}
                {this.props.instrumentScientists.fetching ? (
                  <Glyphicon className="spin" glyph="repeat" />
                ) : (
                  this.props.instrumentScientists.data.length
                )}
              </Badge>
            </Panel.Title>
          </Panel.Heading>
          <Panel.Body>
            <InstrumentScientistTable
              fetchInstrumentScientistsBySessionId={
                this.props.fetchInstrumentScientistsBySessionId
              }
              user={this.props.user}
              instrumentScientists={this.props.instrumentScientists.data}
              fetching={this.props.instrumentScientists.fetching}
            />
          </Panel.Body>
        </Panel>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    user: state.user,
    instrumentScientists: state.instrumentscientists,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    setBreadCrumbs: bindActionCreators(setBreadCrumbs, dispatch),
    fetchInstrumentScientistsBySessionId: bindActionCreators(
      fetchInstrumentScientistsBySessionId,
      dispatch
    ),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(UserManagementPage);
