import { useMemo, useCallback } from 'react';
import PropTypes from 'prop-types';
import { useNavigationPages, useNavigate } from "../../../hooks/election/index.js";
import DropdownSelect from "../DropdownSelect/index.js";
import StateName from "../StateName/index.js";
import { prependContext } from "../../../utils/tracking/index.js";

/**
 * A state select navigation that lets you navigate to any state index page
 * that exists in the rig by choosing the state from the drop-down. This
 * renders as a button-triggered pop-up on desktop and a native select input on
 * mobile. It supports two sizes.
 */
const NavigationChooseState = function NavigationChooseState(props) {
  const {
    size,
    tracking
  } = props;
  const navigate = useNavigate();
  const pages = useNavigationPages();
  const options = useMemo(() => pages.states.map(state => ({
    value: state,
    label: <StateName key={state} stateFips={state} />
  })), [pages.states]);
  const onSelect = useCallback(state => {
    navigate(`state:${state}:index`);
  }, [navigate]);
  const trackingOpts = {
    context: prependContext({
      prefix: 'NavigationChooseState',
      context: tracking?.context
    })
  };
  return <DropdownSelect placeholder="Choose a state" options={options} size={size} shadow="200" value="" onSelect={onSelect} tracking={trackingOpts} />;
};
NavigationChooseState.defaultProps = {
  size: 'sm',
  tracking: {}
};
NavigationChooseState.propTypes = {
  /**
   * The size of the target
   */
  size: PropTypes.oneOf(['sm', 'lg']),
  /**
   * Tracking configuration
   */
  tracking: PropTypes.shape({
    context: PropTypes.string
  })
};
export default NavigationChooseState;