import React from 'react';
import { Badge, Glyphicon, Nav, NavItem } from 'react-bootstrap';
import { useSelector } from 'react-redux';
import { useParams } from 'react-router';
import { LinkContainer } from 'react-router-bootstrap';
import UI from '../../config/ui/config';

function TabContainerMenu(props) {
  const { doi } = props;
  const datasetCount = useSelector((state) => state.datasets.data.length);

  const { investigationId } = useParams();
  const routePrefix = `/investigation/${investigationId}`;

  return (
    <Nav bsStyle="tabs">
      {UI.investigationContainer.isDatasetListVisible && (
        <LinkContainer to={doi ? `/public/${doi}` : `${routePrefix}/datasets`}>
          <NavItem eventKey="datasets" href="">
            <Glyphicon glyph="list" />
            <span style={{ marginLeft: 2 }}> Dataset List &nbsp;</span>
            <Badge bsClass="ourBadges-m"> {datasetCount} </Badge>
          </NavItem>
        </LinkContainer>
      )}

      {!doi && (
        <>
          <LinkContainer to={`${routePrefix}/events`}>
            <NavItem eventKey="events" href="">
              <Glyphicon glyph="comment" />
              <span style={{ marginLeft: 2 }}> Logbook </span>
            </NavItem>
          </LinkContainer>

          {UI.sampleTracking.enabled && (
            <>
              <LinkContainer to={`${routePrefix}/shipping`}>
                <NavItem eventKey="shipping" href="">
                  <Glyphicon glyph="plane" />
                  <span style={{ marginLeft: 2 }}> Shipping </span>
                </NavItem>
              </LinkContainer>
            </>
          )}
        </>
      )}
    </Nav>
  );
}

export default TabContainerMenu;
