import PropTypes from 'prop-types';
import { useDelegates, useSortedDelegates } from "../../../hooks/election/index.js";
import ModuleTitle from "../ModuleTitle/index.js";
import useResizeObserver from "../../../hooks/useResizeObserver/index.js";
import DelegateTable from './DelegateTable';
import classes from './styles.module.scss';

/**
 * A tracker of total delegate counts over the course of a whole primary
 * cycle.
 */
const DelegateCounterOvertime = function DelegateCounterOvertime(props) {
  const {
    party,
    headline,
    description,
    reporterNote: reporterNoteProps,
    eyebrow,
    displayCandidates,
    displayCandidatesNumber
  } = props;
  const delegates = useDelegates(party);
  const candidates = useSortedDelegates({
    party
  });
  const [ref, [componentWidth]] = useResizeObserver();
  if (!delegates) {
    return null;
  }
  return <div ref={ref} className={classes.container} data-party={party}>
      <ModuleTitle headline={headline} description={description} eyebrow={eyebrow || {
      isLive: true
    }} reporterNote={reporterNoteProps} />
      <DelegateTable delegates={delegates} candidates={candidates} componentWidth={componentWidth} displayCandidates={displayCandidates} displayCandidatesNumber={displayCandidatesNumber} />
    </div>;
};
DelegateCounterOvertime.defaultProps = {
  description: '',
  reporterNote: undefined,
  headline: undefined,
  eyebrow: undefined,
  displayCandidates: 'all',
  displayCandidatesNumber: undefined
};
DelegateCounterOvertime.propTypes = {
  /**
   * The ID of the party to show delegate counts for
   */
  party: PropTypes.oneOf(['dem', 'gop']).isRequired,
  /**
   * The headline for the module
   */
  headline: PropTypes.string,
  /**
   * The optional dek for the module
   */
  description: PropTypes.string,
  /**
   * The optional props for a reporter note
   */
  reporterNote: PropTypes.shape({}),
  /**
   * Custom eyebrow props
   */
  eyebrow: PropTypes.shape({}),
  /**
   * How to display candidates
   */
  displayCandidates: PropTypes.oneOf(['all', 'expand', 'exclude', 'note']),
  /**
   * How many candidates to display above the fold. Interacts with
   * `displayCandidates` prop.
   */
  displayCandidatesNumber: PropTypes.number
};
export default DelegateCounterOvertime;