import classnames from 'classnames';
import { ScrollArea } from "../../../structure/index.js";
import useResponsiveValues from "../../../../hooks/breakpoint/useResponsiveValues/index.js";
import StateName from "../../StateName/index.js";
import ElectionLink from "../../ElectionLink/index.js";
import cx from "../../../../utils/css/cx.js";
import classes from './styles.module.scss';
import useResetScroll from '../useResetScroll';
const StateNav = function StateNav(props) {
  const {
    currentPage,
    pages
  } = props;
  const {
    stateFips
  } = currentPage.metadata;
  const stateName = useResponsiveValues({
    xs: {
      format: 'ap_abbr'
    },
    md: {
      format: 'name'
    }
  });
  const scrollRef = useResetScroll();
  const trackingOpts = {
    context: 'ElectionNav:StateNav'
  };
  return <nav className={classes.container} aria-labelledby="state-nav-title">
      <ScrollArea ref={scrollRef} className={classes.scrollContainer}>
        <div className={classes.links}>
          <div className={classes.title} id="state-nav-title">
            <ElectionLink to={`state:${stateFips}:index`} tracking={trackingOpts}>
              <StateName stateFips={stateFips} format={stateName.format} />
              <span className={cx('sr-only')}>
                Election Results
              </span>
            </ElectionLink>
          </div>
          {pages.map(page => <div key={page.id} className={classnames(classes.link, {
          [classes.active]: page.id === currentPage.metadata.id
        })}>
              <ElectionLink to={page.roles[0]}>
                {page.nav.name}
              </ElectionLink>
            </div>)}
        </div>
      </ScrollArea>
    </nav>;
};
export default StateNav;