/** @module HeaderLinkList */

import React from "react";
import PropTypes from "prop-types";
import { Nav, NavItem } from "reactstrap";
import { Button, Tooltip } from "@material-ui/core";
import { NavLink } from "react-router-dom";

import * as types from "../Types/types";
import { bootstrapSizes } from "../Data/data";

/**
 * @function HeaderLinkList
 * @description generates dynamic list of NavItem's based on pagesObject
 * @returns {React.Component}
 */
const HeaderLinkList = props => {
  const {
    pagesObject: { pages, mobileThreshold, searchObject },
    toggleNav,
    isNavOpen
  } = props;

  /**
   * @constant navLinkStyle
   * @description common navLink styles
   */
  const navLinkStyle = `nav-link mt-1 ml-1 text-center align-text-top${
    searchObject.enabled && !isNavOpen ? " withSearch" : ""
  }${isNavOpen ? " pr-3 pl-3" : ""}`;

  const linkList = pages.map(tab => {
    let classes = "";
    if (tab.desktopOnly) {
      classes = `d-none d-${bootstrapSizes[mobileThreshold]}-flex`;
    }
    if (tab.mobileOnly) {
      classes = `d-flex d-${bootstrapSizes[mobileThreshold]}-none`;
    }
    const ThisButton = (
      <Button className={navLinkStyle}>
        <span className={`${tab.icon} fa-lg`} />
        <span
          className={`d-none d-${bootstrapSizes[mobileThreshold]}-inline d-${
            bootstrapSizes[mobileThreshold + 1]
          }-none`}
        >
          <br />
        </span>
        <span>{tab.name}</span>
      </Button>
    );
    return (
      <NavItem key={tab.path} data-test="nav-item" className={`${classes}`}>
        {!tab.link ? (
          <NavLink
            data-test="button-toggle-nav"
            to={`/${tab.path}`}
            onClick={() => toggleNav(false)}
          >
            {ThisButton}
          </NavLink>
        ) : (
          <Tooltip title={<span className="fas fa-external-link-alt" />}>
            <a
              data-test="button-toggle-nav"
              href={tab.link}
              target={tab.target || "_new"}
              onClick={() => toggleNav(false)}
            >
              {ThisButton}
            </a>
          </Tooltip>
        )}
      </NavItem>
    );
  });
  return (
    <Nav data-test="navbar-link-list" navbar className="mr-5">
      {linkList}
    </Nav>
  );
};

HeaderLinkList.propTypes = {
  pagesObject: types.pagesObject.types,
  isNavOpen: PropTypes.bool,
  toggleNav: PropTypes.func
};

HeaderLinkList.defaultProps = {
  pagesObject: types.pagesObject.defaults,
  isNavOpen: false,
  toggleNav: () => {}
};

export default HeaderLinkList;