import PropTypes from 'prop-types';
import classnames from 'classnames';
import get from 'lodash/get';
import { useNavigationPages } from "../../../hooks/election/index.js";
import IfActive from "../../application/IfActive/index.js";
import Ad from "../../brand/Ad/index.js";
import Navigation from "../../brand/Navigation/index.js";
import EventRecirc from "../EventRecirc/index.js";
import GlobalNav from './GlobalNav';
import StateNav from './StateNav';
import useIsSticky from './useIsSticky';
import classes from './styles.module.scss';
import ModuleContainer from '../ModuleContainer';

/**
 * A flexible navbar for election pages that supports global and
 * state-level navigation.
 */
const ElectionNavigation = function ElectionNavigation(props) {
  const {
    withAd,
    eventRecirc,
    additionalPages
  } = props;
  const [ref, isSticky] = useIsSticky();
  const {
    currentPage,
    globalPages,
    statePages,
    states
  } = useNavigationPages();
  const showStateNav = statePages.length > 0;
  const additionalGlobalPages = get(additionalPages, 'global', []);
  return <>
      <div className={classes.superNav}>
        <IfActive active={withAd}>
          <Ad type="leaderboard" />
        </IfActive>
        <Navigation />
      </div>
      <div ref={ref} />
      <nav className={classnames(classes.nav, {
      [classes.isSticky]: isSticky || !!eventRecirc,
      [classes.isNotSticky]: !isSticky && !eventRecirc
    })}>
        <div className={classes.globalNav}>
          <GlobalNav pages={globalPages} additionalPages={additionalGlobalPages} states={states} />
        </div>
        <IfActive active={showStateNav}>
          <div className={classes.stateNav}>
            <StateNav currentPage={currentPage} pages={statePages} />
          </div>
        </IfActive>
      </nav>
      <IfActive active={!!eventRecirc}>
        <ModuleContainer className={classes.eventRecircContainer} card={false}>
          <EventRecirc {...eventRecirc} />
        </ModuleContainer>
      </IfActive>
      <IfActive active={showStateNav && isSticky}>
        <div className={classes.statePaddingSpacer} />
      </IfActive>
    </>;
};
ElectionNavigation.defaultProps = {
  withAd: false,
  eventRecirc: undefined,
  additionalPages: {}
};
ElectionNavigation.propTypes = {
  /**
   * Include a leaderboard ad at the top of the page.
   */
  withAd: PropTypes.bool,
  /**
   * An event recirc configuration
   */
  eventRecirc: PropTypes.shape({}),
  /**
   * Additional "pages" to place in the nav. These are name/level/url groups
   * that dictate additional links to inject into the nav.
   */
  additionalPages: PropTypes.shape({
    global: PropTypes.arrayOf(PropTypes.shape({
      name: PropTypes.string.isRequired,
      link: PropTypes.string.isRequired
    }))
  })
};
export default ElectionNavigation;