import { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useNavigationPages, useRouterPath } from "../../../hooks/election/index.js";
import AutoLayout from "../../layout/AutoLayout/index.js";
import SideDrawer from "../../structure/SideDrawer/index.js";
import { useSideDrawerState } from "../../../hooks/ui/index.js";
import RigPages from './RigPages';
import Battlegrounds from './Battlegrounds';
import LinkSection from './LinkSection';
import classes from './styles.module.scss';

/**
 * The side drawer for links to all of our pages as well as recirculation
 * to important elections content.
 */
const ElectionSideDrawer = function ElectionSideDrawer(props) {
  const {
    battlegroundStates,
    linkSections
  } = props;
  const path = useRouterPath();
  const drawer = useSideDrawerState();
  const pages = useNavigationPages();
  useEffect(() => () => {
    drawer.close();
  }, [path]);
  const trackingOpts = {
    context: 'ElectionSideDrawer'
  };
  return <SideDrawer bg="warmgray-10" dialogName="All election results links">
      <div className={classes.content}>
        <AutoLayout gap="6">
          <div className={classes.controls}>
            <RigPages pages={pages} tracking={trackingOpts} />
          </div>

          <Battlegrounds states={battlegroundStates} tracking={trackingOpts} />

          {linkSections.map(section => <LinkSection key={section.title} tracking={trackingOpts} {...section} />)}
        </AutoLayout>
      </div>
    </SideDrawer>;
};
ElectionSideDrawer.defaultProps = {
  battlegroundStates: [],
  linkSections: []
};
ElectionSideDrawer.propTypes = {
  /**
   * States to highlight as battlegrounds.
   */
  battlegroundStates: PropTypes.arrayOf(PropTypes.string),
  /**
   * Sections of links for recirculation
   */
  linkSections: PropTypes.arrayOf(PropTypes.shape({
    format: PropTypes.oneOf(['standard', 'emphasis']),
    storyCollectionTag: PropTypes.string,
    numberCollectionStories: PropTypes.number,
    title: PropTypes.string.isRequired,
    links: PropTypes.arrayOf(PropTypes.shape({
      label: PropTypes.string.isRequired,
      link: PropTypes.string.isRequired
    }))
  }))
};
export default ElectionSideDrawer;