import classnames from 'classnames';
import useResponsiveValues from "../../../../hooks/breakpoint/useResponsiveValues/index.js";
import StateName from "../../StateName/index.js";
import ElectionLink from "../../ElectionLink/index.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 <div className={classes.container}>
      <div className={classes.links} ref={scrollRef}>
        <div className={classes.title}>
          <ElectionLink to={`state:${stateFips}:index`} tracking={trackingOpts}>
            <StateName stateFips={stateFips} format={stateName.format} />
          </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>
    </div>;
};
export default StateNav;