import { useState, useEffect } from "react";
import PropTypes from "prop-types";
import HeaderAccountMenu from "./HeaderAccountMenu.jsx";
import HeaderCancel from "./HeaderCancel.jsx";
import HeaderContainer from "./HeaderContainer";
import HeaderMenuItem from "./HeaderMenuItem";
import HeaderMobileButton from "./HeaderMobileButton";
import ImpersonatorBanner from "./ImpersonatorBanner";
import PreviewBanner from "./PreviewBanner.jsx";
import HeaderSearchBar from "../HeaderSearchBar";
import HelpIcon from "./HelpIcon";
import { HeaderStateProvider, useWindowWidth } from "./hooks";
import defaultContent from "./default-content.json";

const HeaderUI = ({
  handleCancel = () => {},
  includeSkipToSidebar = false,
  isDevPre = false,
  showCancelButton = false,
  skipToContentId,
  RouterLink = null,
  isIESupportPage = false,
}) => {
  const [isMobileMenuExpanded, setIsMobileMenuExpanded] = useState(false);
  const [headerContent, setHeaderContent] = useState({});
  const windowWidth = useWindowWidth();

  const mapContentToRows = (config) => {
    // Append transposed array to content
    return config?.map((section) => {
      // Only header items with multiple columns need to be transposed
      // Single column menus' tab order will remain the same
      if (section.columns?.length > 1) {
        const { columns } = section;
        return {
          ...section,
          rows: columns[0].map((_, colIndex) =>
            columns.map((row) => row[colIndex]),
          ),
        };
      }
      return { ...section, rows: section.columns };
    });
  };

  // execute on init render
  useEffect(() => {
    let cancelRequest = false;
    const { origin } = window.location;
    let navMenuItems;
    async function getHeaderConfig() {
      try {
        const response = await fetch(`${origin}/config/header`);
        const data = await response.json();
        navMenuItems = data.data;
      } catch (error) {
        navMenuItems = { content: defaultContent };
      }
      if (!cancelRequest) setHeaderContent(navMenuItems);
    }
    getHeaderConfig();
    return () => {
      cancelRequest = true;
    };
  }, []);

  const content = mapContentToRows(headerContent?.content);
  const sharedHeaderProps = {
    skipToContentId,
    includeSkipToSidebar,
    showSearchBar: headerContent.showSearchBar,
  };

  const displayCancelContent = () => (
    <HeaderContainer {...sharedHeaderProps} showCancelButton>
      <HeaderCancel handleCancel={handleCancel} />
    </HeaderContainer>
  );

  const displayDevPreContent = () => (
    <HeaderContainer
      {...sharedHeaderProps}
      isIESupportPage={isIESupportPage}
      isDevPre={isDevPre}
    >
      <nav
        aria-label="Primary navigation"
        hidden={!isMobileMenuExpanded && windowWidth < 768}
      >
        <ul className="navigation-menu">
          <HeaderAccountMenu isDevPre />
        </ul>
      </nav>
    </HeaderContainer>
  );

  const displayHeaderContent = () => (
    <>
      <HeaderContainer {...sharedHeaderProps} isIESupportPage={isIESupportPage}>
        <HelpIcon />
        {headerContent.showSearchBar === "true" && windowWidth < 768 ? (
          <div style={{ width: "100%" }}>
            <HeaderSearchBar />
          </div>
        ) : null}
        <HeaderMobileButton
          handleClick={() => setIsMobileMenuExpanded(!isMobileMenuExpanded)}
          isMobileMenuExpanded={isMobileMenuExpanded}
        />
        <nav
          aria-label="Primary navigation"
          hidden={!isMobileMenuExpanded && windowWidth < 768}
        >
          <ul className="navigation-menu navigation-new-style">
            {content.map((header) => (
              <HeaderMenuItem
                handleClick={() => {
                  setIsMobileMenuExpanded(!isMobileMenuExpanded);
                }}
                isMobileMenuExpanded={isMobileMenuExpanded}
                key={header.name}
                {...header}
              />
            ))}
            <HeaderAccountMenu
              handleClick={() => setIsMobileMenuExpanded(!isMobileMenuExpanded)}
            />
          </ul>
        </nav>
      </HeaderContainer>
      <ImpersonatorBanner />
      <PreviewBanner />
    </>
  );

  const displayContent = () => {
    if (showCancelButton) return displayCancelContent();
    if (isDevPre) return displayDevPreContent();
    if (content?.length) return displayHeaderContent();
    return null;
  };

  return (
    <HeaderStateProvider RouterLink={RouterLink} headerContent={headerContent}>
      {displayContent()}
    </HeaderStateProvider>
  );
};

HeaderUI.propTypes = {
  handleCancel: PropTypes.func,
  includeSkipToSidebar: PropTypes.bool,
  isDevPre: PropTypes.bool,
  performanceYear: PropTypes.number,
  showCancelButton: PropTypes.bool,
  showPhysicianCompareLink: PropTypes.bool,
  showFacilityBasedPreviewLink: PropTypes.bool,
  skipToContentId: PropTypes.string,
  RouterLink: PropTypes.func,
  isIESupportPage: PropTypes.bool,
};

export default HeaderUI;