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';

function ClosedDataPage() {
  const isAdministrator = useSelector((state) => state.user.isAdministrator);
  const investigations = useSelector((state) => state.investigations);

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(setBreadCrumbs([{ name: 'Closed Data' }]));
  }, [dispatch]);

  return (
    <div className="app__inner">
      <Panel bsStyle="danger">
        <Panel.Heading>
          <Panel.Title componentClass="h2">
            <Glyphicon glyph="lock" style={{ marginRight: 10 }} />
            Investigations under embargo
          </Panel.Title>
        </Panel.Heading>
        <Panel.Body>
          <InvestigationsContainer
            investigations={investigations}
            showInvestigationStats={isAdministrator}
            inPanel
          />
        </Panel.Body>
      </Panel>
    </div>
  );
}

export default ClosedDataPage;
