import React from 'react';
import { Glyphicon, Nav, Navbar, NavDropdown, NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
import { Link } from 'react-router-dom';
import UI from '../../config/ui/config';
import BreadCrumbs from '../Breadcrumbs/BreadCrumbs';
import ManagerMenu from './ManagerMenu';
import keycloak from '../../config/sso/keycloak';
import { useSelector, useDispatch } from 'react-redux';
import { doLogOut } from '../../actions/login';
import { fetchInvestigationsAsInstrumentScientist } from '../../actions/investigations';
import styles from './Menu.module.css';

function Menu() {
  const user = useSelector((state) => state.user);
  const myInvestigations = useSelector((state) => state.myInvestigations);
  const datacollections = useSelector((state) => state.datacollections);
  const investigations = useSelector((state) => state.investigations);
  const selection = useSelector((state) => state.selection);
  const scientistInstrumentInvestigations = useSelector(
    (state) => state.scientistInstrumentInvestigations
  );
  const breadcrumbsList = useSelector((state) => state.breadcrumbsList);
  const { sessionId, fullName, isAdministrator } = user;

  const dispatch = useDispatch();

  function handleLogout() {
    if (keycloak && user.isSSO) {
      keycloak.logout();
    } else {
      dispatch(doLogOut());
    }
  }

  if (!sessionId) {
    return (
      <Navbar className={styles.menu} staticTop fluid inverse collapseOnSelect>
        <Navbar.Header>
          <Navbar.Brand>
            <Link to="/">{UI.menu.applicationTitle}</Link>
          </Navbar.Brand>
          <Navbar.Toggle />
        </Navbar.Header>
      </Navbar>
    );
  }

  return (
    <div>
      <Navbar className={styles.menu} staticTop fluid inverse collapseOnSelect>
        <Navbar.Header>
          <Navbar.Brand className={styles.logo}>
            <Link to="/">{UI.menu.applicationTitle}</Link>
          </Navbar.Brand>
          <Navbar.Toggle />
        </Navbar.Header>
        <Navbar.Collapse>
          <Nav>
            {UI.menu.isSearchVisible && (
              <LinkContainer to="/search">
                <NavItem eventKey={2}>
                  <Glyphicon
                    style={{ fontSize: 20, verticalAlign: 'top' }}
                    glyph="search"
                  />
                </NavItem>
              </LinkContainer>
            )}

            <LinkContainer
              to="/investigations"
              isActive={(match, location) =>
                match || /^\/(|home)$/.test(location.pathname)
              }
            >
              <NavItem eventKey={3}>
                My Data
                <span className="badge" style={{ marginLeft: 10 }}>
                  {myInvestigations.data.length}
                </span>
              </NavItem>
            </LinkContainer>

            {UI.menu.isOpenDataVisible && (
              <LinkContainer to="/public">
                <NavItem eventKey={3} href="/public">
                  Open Data
                  {datacollections.fetching ? (
                    <Glyphicon
                      style={{ marginLeft: 10 }}
                      className="spin"
                      glyph="repeat"
                    />
                  ) : (
                    <span className="badge" style={{ marginLeft: 10 }}>
                      {datacollections.data.length}
                    </span>
                  )}
                </NavItem>
              </LinkContainer>
            )}

            {UI.menu.isClosedDataVisible && (
              <LinkContainer to="/closed">
                <NavItem eventKey={4} href="/closed">
                  Closed Data
                  {!investigations.initialized && investigations.fetching ? (
                    <Glyphicon
                      style={{ marginLeft: 10 }}
                      className="spin"
                      glyph="repeat"
                    />
                  ) : (
                    <span className="badge" style={{ marginLeft: 10 }}>
                      {investigations.data.length}
                    </span>
                  )}
                </NavItem>
              </LinkContainer>
            )}

            {UI.menu.isMySelectionVisible && selection.datasetIds.length > 0 && (
              <LinkContainer to="/selection">
                <NavItem eventKey={3}>
                  My Selection
                  <span className="badge" style={{ marginLeft: 10 }}>
                    {selection.datasetIds.length}
                  </span>
                </NavItem>
              </LinkContainer>
            )}

            {UI.sampleTracking.enabled && (
              <NavDropdown
                eventKey={3}
                title="Shipping"
                id="basic-nav-dropdown"
              >
                <LinkContainer to="/parcels">
                  <NavItem eventKey={3}>My Parcels</NavItem>
                </LinkContainer>
                <LinkContainer to="/addresses">
                  <NavItem eventKey={3}>My Addresses</NavItem>
                </LinkContainer>
              </NavDropdown>
            )}

            {(isAdministrator ||
              scientistInstrumentInvestigations.data.length > 0) && (
              <ManagerMenu
                user={user}
                fetchInvestigationsAsInstrumentScientist={() =>
                  dispatch(fetchInvestigationsAsInstrumentScientist())
                }
                scientistInstrumentInvestigations={
                  scientistInstrumentInvestigations
                }
              />
            )}
          </Nav>

          <Nav pullRight>
            <NavItem eventKey={2} onClick={handleLogout}>
              <Glyphicon glyph="log-out" style={{ marginRight: '1rem' }} />
              Log out <strong>{fullName}</strong>
            </NavItem>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <BreadCrumbs breadcrumbs={breadcrumbsList.items} />
    </div>
  );
}

export default Menu;
