import useResponsiveValues from "../../../../hooks/breakpoint/useResponsiveValues/index.js";
import { useSideDrawerState } from "../../../../hooks/election/index.js";
import IfActive from "../../../application/IfActive/index.js";
import ProductLogo from "../../ProductLogo/index.js";
import { IconHamburger } from "../../../icons/index.js";
import ElectionLink from "../../ElectionLink/index.js";
import NavigationChooseState from "../../NavigationChooseState/index.js";
import { useCallback } from 'react';
import useResetScroll from '../useResetScroll';
import classes from './styles.module.scss';
const GlobalNav = function GlobalNav(props) {
  const {
    pages,
    additionalPages,
    states
  } = props;
  const trackingOpts = {
    context: 'ElectionNav:GlobalNav'
  };
  const layout = useResponsiveValues({
    xs: {
      logo: 'horizontal',
      states: false
    },
    md: {
      logo: 'horizontal',
      states: true
    }
  });
  const showStates = layout.states && states.length > 0;
  const drawer = useSideDrawerState(trackingOpts);
  const scrollRef = useResetScroll();
  const toggleAndTrack = useCallback(() => {
    drawer.toggle();
  }, [drawer]);
  const pageLinks = [...pages.map(page => ({
    id: `rig-${page.id}`,
    to: page.roles[0],
    name: page.nav.name
  })), ...additionalPages.map((page, i) => ({
    id: `additional-${i}`,
    to: page.link,
    name: page.name
  }))];
  return <div className={classes.container}>
      <div className={classes.scroll} ref={scrollRef}>
        <div className={classes.logo}>
          <ElectionLink tracking={trackingOpts} to="index">
            <ProductLogo shape={layout.logo} />
          </ElectionLink>
        </div>
        <div className={classes.links}>
          {pageLinks.map(page => <span key={page.id} className={classes.linkText}>
              <ElectionLink className={classes.link} tracking={trackingOpts} to={page.to}>
                {page.name}
              </ElectionLink>
            </span>)}
        </div>
      </div>
      <IfActive active={showStates}>
        <NavigationChooseState size="sm" tracking={trackingOpts} />
      </IfActive>
      <div className={classes.drawer}>
        <button className={classes.toggle} type="button" onClick={toggleAndTrack} title="Toggle side drawer">
          <IconHamburger size="24" weight="bold" />
        </button>
      </div>
    </div>;
};
export default GlobalNav;