import { useCallback, useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import get from 'lodash/get';
import { useActivateElections } from "../../../hooks/election/index.js";
import IfActive from "../../application/IfActive/index.js";
import EmbedNationalMap from "../EmbedNationalMap/index.js";
import EmbedMapLeaderboard from "../EmbedMapLeaderboard/index.js";
import { useTrackStandardEvent } from "../../../hooks/tracking/index.js";
import ButtonGroup from './ButtonGroup';
const EmbedGeneralMultiMap = function EmbedGeneralMultiMap(props) {
  const {
    mapConfigurations,
    mapDisplays
  } = props;
  const mapOptions = mapDisplays.map(id => {
    const option = mapConfigurations[id];
    if (!option) {
      // eslint-disable-next-line no-console
      console.error(`Ignoring invalid map display option for EmbedGeneralMultiMap ${id}`);
    }
    return option;
  }).filter(Boolean);
  const [selectedMapIdx, setSelectedMapIdx] = useState(0);
  const track = useTrackStandardEvent({
    component: 'ElectionLink',
    event: 'togglebutton',
    context: 'EmbedGeneralMultiMap'
  });
  const selectMapIndex = useCallback(index => {
    setSelectedMapIdx(index);
    track({
      detail: `${index}`
    });
  });
  const selectedMap = mapOptions[selectedMapIdx] || mapOptions[0];
  const dataList = useMemo(() => {
    const list = get(selectedMap, 'data', []);
    return list.map(config => ({
      config
    }));
  }, [selectedMapIdx]);
  useActivateElections({
    dataList
  });
  const extraProps = get(selectedMap, 'props', {});
  if (!selectedMap) return null;
  return <div>
      <IfActive active={mapDisplays.length > 1}>
        <ButtonGroup maps={mapOptions} setSelectedMapIdx={selectMapIndex} selectedMapIdx={selectedMapIdx} autoLayoutAlignment="center" />
      </IfActive>

      <IfActive active={selectedMap.isNational}>
        <EmbedNationalMap office={selectedMap.office} collectionId={selectedMap.collectionId} bopId={selectedMap.bopId} contestLevel={selectedMap.office} {...extraProps} />
      </IfActive>

      <IfActive active={!selectedMap.isNational}>
        <EmbedMapLeaderboard contests={[selectedMap.contestId]} layout="vertical" verticalFirstModule="map" recirculationLinkPosition="none" {...extraProps} />
      </IfActive>
    </div>;
};
EmbedGeneralMultiMap.defaultProps = {
  mapDisplays: []
};
EmbedGeneralMultiMap.propTypes = {
  /**
   * This is an object mapping map IDs onto contest/collection IDs and
   * corresponding data configurations. This crosswalks with the map toggle
   * options to tell the component what data to load for each map.
   */
  mapConfigurations: PropTypes.objectOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    isNational: PropTypes.bool,
    contestId: PropTypes.string,
    collectionId: PropTypes.string,
    bopId: PropTypes.string,
    office: PropTypes.oneOf(['president', 'senate']),
    data: PropTypes.arrayOf(PropTypes.shape({})),
    props: PropTypes.shape({})
  })).isRequired,
  /**
   * An array of map IDs that specifies which maps to present as toggle options
   * and in which order.
   */
  mapDisplays: PropTypes.arrayOf(PropTypes.string)
};
export default EmbedGeneralMultiMap;