import PropTypes from 'prop-types';
import get from 'lodash/get';
import { useMemo, useState } from 'react';
import ResultsTable from "../ResultsTable/index.js";
import IfActive from "../../application/IfActive/index.js";
import useContainerBreakpointIsAtLeast from "../../../hooks/breakpoint/useContainerBreakpointIsAtLeast/index.js";
import ReporterNote from "../ReporterNote/index.js";
import StateRaceCountiesMap from "../StateRaceCountiesMap/index.js";
import Divider from "../../layout/Divider/index.js";
import Header from './Header';
import Toggle from './Toggle';

/**
 * A combination of summary-level and county-level results for a statewide
 * contest.
 */
const StatewideContestResults = function StatewideContestResults(props) {
  const {
    contests,
    reporterNote: reporterNoteProps,
    eyebrow,
    headline,
    leaderboardOnly,
    leaderboardProps = {}
  } = props;
  const [selectedContestIdx, setSelectedContestIdx] = useState(0);
  const {
    id: selectedContestId,
    leaderboardProps: selectedLeaderboardProps = {}
  } = useMemo(() => {
    const contest = contests[selectedContestIdx];
    return {
      id: get(contest, 'id', contest),
      leaderboardProps: get(contest, 'leaderboardProps')
    };
  }, [contests, selectedContestIdx]);
  const isAtLeastLg = useContainerBreakpointIsAtLeast('lg');
  return <div>
      <Header selectedContestId={selectedContestId} eyebrow={eyebrow} headline={headline} />

      <IfActive active={!!reporterNoteProps}>
        <Divider margin={{
        t: 2
      }} />
        <ReporterNote layout="vertical-bottom" compact {...reporterNoteProps} />
      </IfActive>

      <Divider margin={{
      t: 2,
      b: 3
    }} color="warmgray-60" />

      <Toggle contests={contests} selectedContestIdx={selectedContestIdx} setSelectedContestIdx={setSelectedContestIdx} />

      <ResultsTable id={selectedContestId} format="standard" {...leaderboardProps} {...selectedLeaderboardProps} />

      <IfActive active={!leaderboardOnly}>
        <Divider margin={{
        y: isAtLeastLg ? 6 : 2
      }} />

        <StateRaceCountiesMap contestId={selectedContestId} />
      </IfActive>
    </div>;
};
StatewideContestResults.defaultProps = {
  reporterNote: undefined,
  eyebrow: undefined,
  headline: undefined,
  leaderboardOnly: false,
  leaderboardProps: undefined
};
StatewideContestResults.propTypes = {
  /**
   * An array of contest tab configurations. Each configuration specifies a
   * contest ID as `id` and a tab name for the tab buttons displayed when there
   * are multiple contests being displayed. A configuration can be specified as a
   * single contest ID string as a short-hand if it is the only contest
   * configuration being passed, in which case the prop value would be an array
   * consisting of a single string.
   */
  contests: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string])).isRequired,
  /**
   * An optional reporter note to include as an inline annotation for this
   * module. Should be passed through to the `ReporterNote` component.
   */
  reporterNote: PropTypes.shape({}),
  /**
   * Custom configuration for the module eyebrow
   */
  eyebrow: PropTypes.shape({}),
  /**
   * Custom headline
   */
  headline: PropTypes.string,
  /**
   * Only include the leaderboard.
   */
  leaderboardOnly: PropTypes.bool,
  /**
   * Custom props to pass to the leaderboard, applied for all contests
   */
  leaderboardProps: PropTypes.shape({})
};
export default StatewideContestResults;