import React, { useEffect } from 'react';
import InvestigationsContainer from './InvestigationsContainer';
import { Panel, Glyphicon } from 'react-bootstrap';
import { useSelector, useDispatch } from 'react-redux';
import { setBreadCrumbs } from '../actions/breadcrumbs';
import { useParams } from 'react-router';
import { filterInvestigations } from '../helpers';

function BeamlineDataPage() {
  const scientistInstrumentInvestigations = useSelector(
    (state) => state.scientistInstrumentInvestigations
  );

  const { id } = useParams();
  const beamline = id.toUpperCase();
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(setBreadCrumbs([{ name: `${beamline} Data` }]));
  }, [beamline, dispatch]);

  const beamlineInvestigations = filterInvestigations(
    scientistInstrumentInvestigations,
    (inv) =>
      inv.investigationInstruments.length > 0 &&
      inv.investigationInstruments[0].instrument.name === beamline
  );

  return (
    <div className="app__inner">
      <Panel bsStyle="primary">
        <Panel.Heading>
          <Panel.Title componentClass="h2">
            <Glyphicon glyph="asterisk" style={{ marginRight: 10 }} />
            Investigations on beamline {beamline}
          </Panel.Title>
        </Panel.Heading>
        <Panel.Body>
          <InvestigationsContainer
            investigations={beamlineInvestigations}
            showInvestigationStats
            withProposalLinks
          />
        </Panel.Body>
      </Panel>
    </div>
  );
}

export default BeamlineDataPage;
