import { uniq } from 'lodash-es';
import React from 'react';
import { Button, Glyphicon, MenuItem, NavDropdown } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
import styles from './Menu.module.css';

class ManagerMenu extends React.Component {
  getBeamlineList(instruments) {
    if (this.props.scientistInstrumentInvestigations.fetching) {
      return (
        <LinkContainer to="/usermanagement">
          <MenuItem eventKey={3.3}>
            Fetching beamlines
            <Glyphicon
              style={{ marginLeft: 10 }}
              className="spin"
              glyph="repeat"
            />
          </MenuItem>
        </LinkContainer>
      );
    }

    if (instruments && instruments.length > 0) {
      const items = instruments
        .slice(0)
        .filter((value) => !!value)
        .sort()
        .map((value, index) => (
          <LinkContainer
            key={value + index}
            to={`/beamline/${value.toLowerCase()}`}
          >
            <MenuItem eventKey={`${3}.${index}`} key={index}>
              {value}{' '}
              <span className="badge" style={{ marginLeft: 10 }}>
                {
                  this.props.scientistInstrumentInvestigations.data.filter(
                    (inv) =>
                      inv.investigationInstruments.length > 0 &&
                      inv.investigationInstruments[0].instrument.name === value
                  ).length
                }
              </span>
            </MenuItem>
          </LinkContainer>
        ));

      //fetchInvestigationsAsInstrumentScientist
      items.unshift(
        <MenuItem eventKey={`${3}.${0}`} key={0}>
          <Button
            onClick={() =>
              this.props.fetchInvestigationsAsInstrumentScientist(
                this.props.user.sessionId
              )
            }
          >
            <Glyphicon glyph="refresh" style={{ marginRight: 10 }} />
            Refresh
          </Button>
        </MenuItem>
      );

      return items;
    }
    return null;
  }

  render() {
    const instruments = uniq(
      this.props.scientistInstrumentInvestigations.data.map((inv) =>
        inv.investigationInstruments.length > 0
          ? inv.investigationInstruments[0].instrument.name
          : undefined
      )
    );

    const navDropdownTitle = (
      <span>
        Manager{' '}
        <span className="badge" style={{ marginLeft: 10 }}>
          {this.props.scientistInstrumentInvestigations.fetching && (
            <Glyphicon
              style={{ marginLeft: 10 }}
              className="spin"
              glyph="repeat"
            />
          )}
          {this.props.scientistInstrumentInvestigations.fetched &&
            instruments.length}
        </span>
      </span>
    );

    return (
      <NavDropdown
        eventKey={3}
        title={navDropdownTitle}
        id="basic-nav-dropdown"
        className={styles.managerMenu}
      >
        <LinkContainer to="/usermanagement">
          <MenuItem eventKey={3.3}>
            <Glyphicon glyph="user" />
            <span style={{ marginLeft: 10 }}>Beamline Managers</span>
          </MenuItem>
        </LinkContainer>
        {this.props.user.isAdministrator && (
          <LinkContainer to="/manager/stats">
            <MenuItem eventKey={3.4}>
              <Glyphicon glyph="stats" />
              <span style={{ marginLeft: 10 }}>Data Statistics</span>
            </MenuItem>
          </LinkContainer>
        )}
        <MenuItem divider />
        {this.getBeamlineList(instruments)}
      </NavDropdown>
    );
  }
}

export default ManagerMenu;
