import PropTypes from 'prop-types';
import ModuleTitle from "../ModuleTitle/index.js";
import { useContestCollectionContests, useVoteHistory } from "../../../hooks/election/index.js";
import cx from "../../../utils/css/cx.js";
import { useContainerBreakpointIsAtLeast } from "../../../hooks/breakpoint/index.js";
import VoteHistoryChart from './Chart';
import classes from './styles.module.scss';
import useChartProps from './useChartProps';
const cls = cx.merge(classes);
const VoteHistory = function VoteHistory(props) {
  const {
    collectionId,
    office,
    groups: inputGroups,
    singleStateFips,
    headline,
    eyebrow,
    description,
    reporterNote,
    includeCurrentYear
  } = props;
  const contests = useContestCollectionContests(collectionId);
  const voteHistory = useVoteHistory(office);
  const isAtLeastLg = useContainerBreakpointIsAtLeast('lg');
  const {
    groups,
    singleMode,
    margins,
    range
  } = useChartProps({
    voteHistory,
    inputGroups,
    singleStateFips,
    contests,
    office,
    includeCurrentYear
  });
  if (!margins) {
    return undefined;
  }
  return <div className={cls('vote-history-module')}>
      <ModuleTitle headline={headline} eyebrow={eyebrow} description={description} reporterNote={reporterNote} />
      <div className={cls('vote-history-charts')}>
        {groups.map((g, idx) => <VoteHistoryChart key={g.id} margins={margins} range={range} singleMode={singleMode} disableYAxis={idx > 0 && isAtLeastLg} {...g} />)}
      </div>
    </div>;
};
VoteHistory.defaultProps = {
  groups: undefined,
  singleStateFips: undefined,
  headline: undefined,
  eyebrow: undefined,
  description: undefined,
  reporterNote: undefined,
  collectionId: undefined,
  includeCurrentYear: false
};
VoteHistory.propTypes = {
  office: PropTypes.oneOf(['president', 'senate']).isRequired,
  groups: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    headline: PropTypes.string,
    states: PropTypes.arrayOf(PropTypes.string)
  })),
  singleStateFips: PropTypes.string,
  headline: PropTypes.string,
  eyebrow: PropTypes.shape({}),
  description: PropTypes.string,
  reporterNote: PropTypes.shape({}),
  collectionId: PropTypes.string,
  includeCurrentYear: PropTypes.bool
};
export default VoteHistory;