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 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';
import RaceCall from '../RaceCall';

/**
 * A flexible navbar for election pages that supports global and
 * state-level navigation.
 */
const ElectionNavigation = function ElectionNavigation(props) {
  const {
    withAd,
    eventRecirc,
    callFeed,
    additionalPages
  } = props;
  const [ref, isSticky] = useIsSticky();
  const {
    currentPage,
    globalPages,
    statePages,
    states
  } = useNavigationPages();
  const showStateNav = statePages.length > 0;
  const additionalGlobalPages = get(additionalPages, 'global', []);
  const isStickyStyle = isSticky || !!eventRecirc;
  return <>
      <div className={classes.superNav}>
        <Navigation withAd={withAd} />
      </div>
      <div ref={ref} />
      <div className={classnames(classes.nav, {
      [classes.isSticky]: isStickyStyle,
      [classes.isNotSticky]: !isStickyStyle
    })}>
        <div className={classes.globalNav}>
          <GlobalNav pages={globalPages} additionalPages={additionalGlobalPages} states={states} showStateNav={showStateNav} />
        </div>
        <IfActive active={showStateNav}>
          <div className={classes.stateNav}>
            <StateNav currentPage={currentPage} pages={statePages} />
          </div>
        </IfActive>
        <IfActive active={!!callFeed}>
          <div className={classes.callFeed}>
            <ModuleContainer className={classes.callFeedContainer} card={false}>
              <RaceCall collectionId={callFeed} withShadow={isStickyStyle} />
            </ModuleContainer>
          </div>
        </IfActive>
      </div>
      <IfActive active={!!eventRecirc}>
        <div className={classes.eventRecirc}>
          <ModuleContainer className={classes.eventRecircContainer} card={false}>
            <EventRecirc {...eventRecirc} />
          </ModuleContainer>
        </div>
      </IfActive>
      <IfActive active={showStateNav && isSticky && !eventRecirc}>
        <div className={classes.statePaddingSpacer} />
      </IfActive>
    </>;
};
ElectionNavigation.defaultProps = {
  withAd: false,
  eventRecirc: undefined,
  callFeed: undefined,
  additionalPages: {}
};
ElectionNavigation.propTypes = {
  /**
   * Include a leaderboard ad at the top of the page.
   */
  withAd: PropTypes.bool,
  /**
   * An event recirc configuration
   */
  eventRecirc: PropTypes.shape({}),
  /**
   * A collection ID to pull a call feed from
   */
  callFeed: PropTypes.string,
  /**
   * 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,
      bopId: PropTypes.string
    }))
  })
};
export default ElectionNavigation;