import { useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import get from 'lodash/get';
import cx from "../../../utils/css/cx.js";
import IfActive from "../../application/IfActive/index.js";
import ElectionLink from "../ElectionLink/index.js";
import ElectionIcon from "../ElectionIcon/index.js";
import ResultsTable from "../ResultsTable/index.js";
import StateRaceCountiesMap from "../StateRaceCountiesMap/index.js";
import AutoLayout from "../../layout/AutoLayout/index.js";
import Header from './Header';
import classes from './styles.module.scss';
import ButtonGroup from './ButtonGroup';
const cls = cx.merge(classes);

/**
 * A utility embed to provide all necessary layouts of the map-and-leaderboard
 * embeds. In practice we will likely provide a few different embeds externally
 * that essentially just hard-code different prop combinations for this embed,
 * but this should be able to provide all the layout combinations, link
 * placements, etc. that we need.
 */
const EmbedMapLeaderboard = function EmbedMapLeaderboard(props) {
  const {
    contests,
    layout,
    recirculationLinkPosition,
    horizontalFirstModule,
    verticalFirstModule,
    leaderboardOnly,
    expandableCutoff,
    buttonAlignment
  } = props;
  const [selectedContestIdx, setSelectedContestIdx] = useState(0);
  const selectedContestId = useMemo(() => {
    const contest = contests[selectedContestIdx];
    const id = get(contest, 'id', contest);
    return id;
  }, [contests, selectedContestIdx]);
  const trackingOpts = {
    context: 'EmbedMapLeaderboard'
  };
  const autoLayoutAlignment = buttonAlignment === 'center' ? 'center' : 'topLeft';
  const link = <AutoLayout align={{
    sm: autoLayoutAlignment,
    xs: 'topLeft'
  }}>
      <ElectionLink to="index" tracking={{
      ...trackingOpts,
      linkName: 'overall-recirc'
    }}>
        <div className={cls('recirc-link')}>
          2024 Election Results
          {' '}
          <ElectionIcon type="LinkCaret" size="2" />
        </div>
      </ElectionLink>
    </AutoLayout>;
  return <div className={cls('container', `recirc-link-${recirculationLinkPosition}`)}>
      <IfActive active={recirculationLinkPosition === 'top'}>
        {link}
      </IfActive>

      <IfActive active={contests.length > 1}>
        <ButtonGroup contests={contests} setSelectedContestIdx={setSelectedContestIdx} selectedContestIdx={selectedContestIdx} autoLayoutAlignment={autoLayoutAlignment} />
      </IfActive>

      <div className={cls('contents', `layout-${layout}`, `horizontal-first-${horizontalFirstModule}`, `vertical-first-${verticalFirstModule}`)}>
        <div className={cls('leaderboard')}>
          <Header contestId={selectedContestId} tracking={trackingOpts} />
          <ResultsTable id={selectedContestId} format="standard" expandable="aggregationOnly" expandableCutoff={expandableCutoff} />
        </div>
        <IfActive active={!leaderboardOnly}>
          <div>
            <StateRaceCountiesMap contestId={selectedContestId} />
          </div>
        </IfActive>
      </div>
      <IfActive active={recirculationLinkPosition === 'bottom'}>
        {link}
      </IfActive>
    </div>;
};
EmbedMapLeaderboard.defaultProps = {
  layout: 'horizontal',
  recirculationLinkPosition: 'top',
  horizontalFirstModule: 'leaderboard',
  verticalFirstModule: 'leaderboard',
  leaderboardOnly: false,
  expandableCutoff: undefined,
  buttonAlignment: 'left'
};
EmbedMapLeaderboard.propTypes = {
  /**
   * An array of contests to display.
   */
  contests: PropTypes.arrayOf(PropTypes.string).isRequired,
  /**
   * The layout of the embed. This dictates the position of the leaderboard
   * relative to the map. In `vertical` mode they will always be stacked. In
   * `horizontal` mode they will be side-by-side until there is not enough
   * space to render them, at which point they will stack.
   */
  layout: PropTypes.oneOf(['horizontal', 'vertical']),
  /**
   * The position of the rig link, which can either appear at the top or the
   * bottom of the lockup. Setting this prop to `none` will prevent the recirc
   * link from rendering at all.
   */
  recirculationLinkPosition: PropTypes.oneOf(['top', 'bottom', 'none']),
  /**
   * The first module to display when side-by-side.
   */
  horizontalFirstModule: PropTypes.oneOf(['map', 'leaderboard']),
  /**
   * The first module to display when stacked.
   */
  verticalFirstModule: PropTypes.oneOf(['map', 'leaderboard']),
  /**
   * Only include the leaderboard.
   */
  leaderboardOnly: PropTypes.bool,
  /**
   * Cutoff before candidate aggregation
   */
  expandableCutoff: PropTypes.number,
  /**
   * Button alignment for multi-state
   */
  buttonAlignment: PropTypes.oneOf(['left', 'center'])
};
export default EmbedMapLeaderboard;