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

const INDUSTRY_PROPOSAL_REGEX = /^(IX|FX|IN|IM)/;

function MyDataPage() {
  const dispatch = useDispatch();

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

  const myInvestigations = useSelector((state) => state.myInvestigations);
  const mySessions = filterInvestigations(
    myInvestigations,
    (inv) => inv.visitId !== 'PROPOSAL'
  ); // TODO replace with `inv.type !== "PROPOSAL"` when available
  const myIndustryProposals = filterInvestigations(
    myInvestigations,
    (inv) =>
      inv.visitId === 'PROPOSAL' && INDUSTRY_PROPOSAL_REGEX.test(inv.name)
  ); // TODO replace with `inv.type !== "PROPOSAL"` when available

  // Otherwise, display the user's investigations
  return (
    <div className="app__inner">
      <Panel bsStyle="primary">
        <Panel.Heading>
          <Panel.Title componentClass="h2">
            <Glyphicon glyph="user" style={{ marginRight: 10 }} />
            My Sessions
          </Panel.Title>
        </Panel.Heading>
        <Panel.Body>
          <InvestigationsContainer
            investigations={mySessions}
            showInvestigationStats
            withProposalLinks
            inPanel
          />
        </Panel.Body>
      </Panel>
      {myIndustryProposals.data.length > 0 && (
        <Panel bsStyle="info">
          <Panel.Heading>
            <Panel.Title componentClass="h2">
              <Glyphicon glyph="user" style={{ marginRight: 10 }} />
              My Industry Proposals
            </Panel.Title>
          </Panel.Heading>
          <Panel.Body>
            <p>
              You may create parcels for the proposals below if no sessions have
              been scheduled for them.
            </p>
            <InvestigationsContainer
              investigations={myIndustryProposals}
              showInvestigationStats
              withProposalLinks
              inPanel
            />
          </Panel.Body>
        </Panel>
      )}
    </div>
  );
}

export default MyDataPage;
