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

function OpenDataPage() {
  const releasedInvestigations = useSelector(
    (state) => state.releasedInvestigations
  );
  const dispatch = useDispatch();

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

  const filterPublications = (data) =>
    data.filter((o) =>
      o.parameters.some(
        (p) => p.name === 'instrumentNames' && p.value !== 'PUBLISHER'
      )
    );
  const filterNotPublications = (data) =>
    data.filter((o) =>
      o.parameters.some(
        (p) => p.name === 'instrumentNames' && p.value === 'PUBLISHER'
      )
    );

  return (
    <div className="app__inner">
      <Panel bsStyle="primary" style={{ marginBottom: 30 }}>
        <Panel.Heading>
          <Panel.Title componentClass="h2">
            <Glyphicon glyph="eye-open" style={{ marginRight: 10 }} />
            Open Data Collections
          </Panel.Title>
        </Panel.Heading>

        <Panel.Body>
          <DataCollectionsContainer filterFunction={filterPublications} />
        </Panel.Body>
      </Panel>

      <Panel bsStyle="success" style={{ marginBottom: 30 }}>
        <Panel.Heading>
          <Panel.Title componentClass="h2">
            <Glyphicon glyph="eye-open" style={{ marginRight: 10 }} />
            Public Documents
          </Panel.Title>
        </Panel.Heading>

        <Panel.Body>
          <DataCollectionsContainer filterFunction={filterNotPublications} />
        </Panel.Body>
      </Panel>

      <Panel bsStyle="info">
        <Panel.Heading>
          <Panel.Title componentClass="h2">
            <Glyphicon glyph="eye-open" style={{ marginRight: 10 }} />
            Open Investigations
          </Panel.Title>
        </Panel.Heading>

        <Panel.Body>
          <InvestigationsContainer
            investigations={releasedInvestigations}
            showInvestigationStats
            withProposalLinks
            isOpenData
            inPanel
          />
        </Panel.Body>
      </Panel>
    </div>
  );
}

export default OpenDataPage;
