import PropTypes from "prop-types";
import { useHeaderState } from "./hooks";
import { setUtagLink } from "./utag-helpers";
import HeaderMenuItem from "./HeaderMenuItem";
import Session from "../Session";

const HeaderAccountMenu = ({ handleClick, isDevPre = false }) => {
  const { closeMenus, RouterLink, headerContent } = useHeaderState();
  const { isLoggedIn, firstName, devPreMenuLinks, accountMenuLinks } =
    headerContent;

  const isDevPreAndNotAuthenticated = !isLoggedIn && isDevPre;

  if (isDevPreAndNotAuthenticated) {
    return null;
  }

  // login link
  if (!isLoggedIn) {
    if (RouterLink) {
      return (
        <li onClick={handleClick} className="header-item-login login">
          <RouterLink
            className="menu-link"
            to="/login"
            onClick={() => {
              closeMenus();
              setUtagLink("main navbar", "click", "/login");
            }}
            data-track-category="TopNav"
            data-track-action="click"
            data-track-label="Sign In"
          >
            <div className="nav-title">Sign In</div>
            <div className="nav-description">
              Manage Account <br />
              and Register
            </div>
          </RouterLink>
        </li>
      );
    }
    return (
      <li className="header-item-login login">
        <a
          className="menu-link"
          href="/login"
          data-track-category="TopNav"
          data-track-action="click"
          data-track-label="Sign In"
          onClick={() => {
            setUtagLink("main navbar", "click", "/login");
          }}
        >
          <div className="nav-title">Sign In</div>
          <div className="nav-description">
            Manage Account <br />
            and Register
          </div>
        </a>
      </li>
    );
  }

  if (isLoggedIn) {
    return (
      <>
        <Session />
        <HeaderMenuItem
          hasMenu
          menuName="Login"
          name={firstName}
          subtitle="My Account"
          className="account-menu-item"
          columns={isDevPre ? devPreMenuLinks : accountMenuLinks}
          rows={isDevPre ? devPreMenuLinks : accountMenuLinks}
        />
      </>
    );
  }
};

HeaderAccountMenu.propTypes = {
  isDevPre: PropTypes.bool,
  handleClick: PropTypes.func.isRequired,
};

export default HeaderAccountMenu;