import useResponsiveValues from "../../../../hooks/breakpoint/useResponsiveValues/index.js";
import cx from "../../../../utils/css/cx.js";
import { useSideDrawerState } from "../../../../hooks/ui/index.js";
import { ScrollArea } from "../../../structure/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 InlineBOP from './InlineBOP';
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const GlobalNav = function GlobalNav(props) {
  const {
    pages,
    additionalPages,
    states,
    showStateNav
  } = 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,
    bopId: page.nav.bopId
  })), ...additionalPages.map((page, i) => ({
    id: `additional-${i}`,
    to: page.link,
    name: page.name,
    bopId: page.bopId
  }))];
  return <nav className={classes.container} title="Election results">
      <ScrollArea ref={scrollRef} palette="warmgray" className={cls('scrollContainer', {
      showStateNav
    })}>
        <div className={classes.scroll}>
          <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}>
                  <div className={cls({
                bopContainer: page.bopId
              })}>
                    {page.name}
                    <IfActive active={!!page.bopId}>
                      <InlineBOP bopId={page.bopId} />
                    </IfActive>
                  </div>
                </ElectionLink>

              </span>)}
          </div>
        </div>
      </ScrollArea>
      <IfActive active={!showStates}>
        <div />
      </IfActive>
      <IfActive active={showStates}>
        <NavigationChooseState size="sm" tracking={trackingOpts} />
      </IfActive>
      <div className={cls('drawer', {
      showStateNav
    })}>
        <button className={classes.toggle} type="button" onClick={toggleAndTrack} title="Toggle all election results links">
          <IconHamburger size="24" weight="bold" />
        </button>
      </div>
    </nav>;
};
export default GlobalNav;