import { useMemo } from 'react';
import MiniLeaderboard from "../../../MiniLeaderboard/index.js";
import { formatNumber } from "../../../../../utils/election/index.js";
import StateName from "../../../StateName/index.js";
import { useStatePopulations } from "../../../../../hooks/election/index.js";
import { IfActive } from "../../../../application/index.js";
import classes from './styles.module.scss';
export default function BopTooltip(props) {
  const {
    meta = {}
  } = props;
  const {
    fips,
    contestId
  } = meta;
  const statePops = useStatePopulations();
  const statePop = useMemo(() => {
    const pop = statePops.popAsRaw[fips];
    if (!pop) {
      return undefined;
    }
    return formatNumber(pop, {
      format: 'abbreviation',
      abbreviation: 'word',
      roundTo: 1
    });
  }, [fips]);
  if (!fips) {
    return null;
  }
  return <div>
      <div className={classes.state}>
        <StateName stateFips={fips} />
      </div>
      <div className={classes.pop}>
        {statePop}
        {' '}
        residents
      </div>
      <IfActive active={!!contestId}>
        <hr className={classes.divider} />
        <MiniLeaderboard disableContestName contestId={contestId} />
      </IfActive>
    </div>;
}