import React, { useEffect } from 'react';
import { Col, Grid, Row } from 'react-bootstrap';
import { useParams } from 'react-router';
import { useInvestigation } from '../helpers/hooks';
import { useDispatch } from 'react-redux';
import { setBreadCrumbs } from '../actions/breadcrumbs';
import TabContainerMenu from '../components/TabContainerMenu/TabContainerMenu';
import LogbookContainer from './Logbook/LogbookContainer';
import Loader from '../components/Loader';
import PageNotFound from './PageNotFound';

function EventsPage() {
  const { investigationId } = useParams();
  const { investigation, fetching } = useInvestigation(investigationId);
  const dispatch = useDispatch();

  useEffect(() => {
    if (investigation) {
      dispatch(
        setBreadCrumbs([
          { name: investigation.visitId.toUpperCase() },
          { badge: investigation.name, name: investigation.summary },
        ])
      );
    }
  }, [dispatch, investigation]);

  if (!investigation) {
    return fetching ? (
      <Loader message="Loading investigation..." spacedOut />
    ) : (
      <PageNotFound />
    );
  }

  return (
    <Grid fluid>
      <Row>
        <Col sm={12}>
          <TabContainerMenu />
          <LogbookContainer investigationId={investigationId} />
        </Col>
      </Row>
    </Grid>
  );
}

export default EventsPage;
