import PropTypes from 'prop-types';
import { useDelegates } from "../../../hooks/election/index.js";
import { useState } from 'react';
import Chart from './Chart';
import ModuleTitle from '../ModuleTitle';
import useProgrammaticTitle from './useProgrammaticTitle';
import useChartLabel from './useChartLabel';
import ChartLabel from './ChartLabel';
import useStatesByDelegates from './useStatesByDelegates';
const labelId = 'state-importance-label';

/**
 * The goal of this module is to give readers a reference for how “important”
 * a single state is compared to other states by using the number of
 * pledged delegates as a comparison.
 */
const DelegatesStateImportance = function DelegatesStateImportance(props) {
  const {
    party,
    stateFips,
    headline,
    description,
    eyebrow
  } = props;
  const delegates = useDelegates(party);
  const [statesByDelegates, totalDelegates] = useStatesByDelegates(delegates);
  const [activeFips, setActiveFips] = useState(stateFips);
  const [moduleHeadline, moduleDescription] = useProgrammaticTitle({
    stateFips,
    party,
    headline,
    description
  });
  const chartLabel = useChartLabel({
    stateFips,
    party,
    statesByDelegates,
    totalDelegates
  });
  if (!delegates) {
    return null;
  }
  return <div>
      <ModuleTitle headline={moduleHeadline} eyebrow={eyebrow} description={moduleDescription} />
      <Chart statesByDelegates={statesByDelegates} activeFips={activeFips} setActiveFips={setActiveFips} stateFips={stateFips} labelId={labelId} />

      <ChartLabel text={chartLabel} id={labelId} />

    </div>;
};
DelegatesStateImportance.defaultProps = {
  headline: undefined,
  description: undefined,
  eyebrow: {}
};
DelegatesStateImportance.propTypes = {
  /**
   * The ID of the party to show delegate counts for
   */
  party: PropTypes.oneOf(['dem', 'gop']).isRequired,
  /**
   * The FIPS code of the state to highlight
   */
  stateFips: PropTypes.string.isRequired,
  /**
   * Override the headline for the module. Leaving this undefined will return an programmatic headline.
   */
  headline: PropTypes.string,
  /**
   * Override the eyebrow settings for this module.
   */
  eyebrow: PropTypes.shape({}),
  /**
   * An optional description for the module.
   */
  description: PropTypes.string
};
export default DelegatesStateImportance;