import PropTypes from "prop-types";

import HeaderLogo from "./HeaderLogo";
import NotificationBanner from "../NotificationBanner";
import GovBanner from "../GovBanner";
import { useHeaderState, useWindowWidth } from "./hooks";
import HeaderSearchBar from "../HeaderSearchBar";
/**
 * Accessibility enhancement that moves focus to an element for "Skip" links
 * @param {Object} e - The native JS event
 * @param {String} id - The HTML ID of the element to be focused
 */
function jumpToLink(e, id) {
  e.preventDefault();
  document.getElementById(id).focus();
}

const HeaderContainer = ({
  children,
  includeSkipToSidebar = false,
  showCancelButton = false,
  skipToContentId,
  isIESupportPage = false,
  isDevPre = false,
  showSearchBar = false,
}) => {
  const windowWidth = useWindowWidth();
  const { currentOpenMenu } = useHeaderState();
  const showSearch = showSearchBar === "true";
  const cssCancelBtn = showCancelButton ? "show-cancel-button " : "";
  const cssMenuDropdownStatus =
    currentOpenMenu === ""
      ? "header-dropdown--closed"
      : "header-dropdown--open";
  const cssSearchBar = showSearch ? " header-height" : "";
  const headerClasses = `${cssCancelBtn}${cssMenuDropdownStatus}${cssSearchBar}`;

  return (
    <>
      <a
        className="skip"
        onClick={(e) => jumpToLink(e, `${skipToContentId || "mainContent"}`)}
        href={`#${skipToContentId || "mainContent"}`}
      >
        Skip to content
      </a>
      {includeSkipToSidebar && (
        <a
          className="skip"
          onClick={(e) => jumpToLink(e, "qppSidebar")}
          href="#qppSidebar"
        >
          Skip to sidebar
        </a>
      )}
      <GovBanner />
      {!isIESupportPage && <NotificationBanner />}
      <header id="top" className={headerClasses}>
        {!showCancelButton && showSearch && windowWidth > 767 ? (
          <HeaderSearchBar />
        ) : null}
        <>
          <HeaderLogo
            isDevPre={isDevPre}
            hasSearchBar={showSearch && !showCancelButton}
          />
          {children}
        </>
      </header>
    </>
  );
};

HeaderContainer.propTypes = {
  children: PropTypes.node.isRequired,
  includeSkipToSidebar: PropTypes.bool,
  showCancelButton: PropTypes.bool,
  skipToContentId: PropTypes.string,
  isIESupportPage: PropTypes.bool,
  isDevPre: PropTypes.object,
  showSearchBar: PropTypes.bool,
};

export default HeaderContainer;