import { useMemo } from 'react';
import get from 'lodash/get';
import { useContestMetadata, useStateDelegates } from "../../../../../hooks/election/index.js";
import formatNumber from "../../../../../utils/election/formatNumber/index.js";
import IfActive from "../../../../application/IfActive/index.js";
import ElectionLink from "../../../ElectionLink/index.js";
import StateName from "../../../StateName/index.js";
import ElectionIcon from "../../../ElectionIcon/index.js";
import ResponsiveText from "../../../ResponsiveText/index.js";
import ResultsVoteIn from "../../../ResultsVoteIn/index.js";
import classes from './styles.module.scss';
const Header = function Header(props) {
  const {
    contestId
  } = props;
  const meta = useContestMetadata(contestId);
  const stateFips = get(meta, 'stateFips', undefined);
  const office = get(meta, 'office', 'index');
  const party = get(meta, 'party', undefined);
  const delegates = useStateDelegates({
    stateFips,
    party
  });
  const totalDelegates = get(delegates, 'total', 0);
  if (!meta) return null;
  const stateNames = useMemo(() => {
    const stateNameFormats = ['abbr', 'ap_abbr', 'name'];
    return stateNameFormats.map(format => ({
      key: format,
      text: <span key={format}>
          <StateName stateFips={stateFips} format={format} />
          {' '}
          <ElectionIcon type="LinkCaret" size="3" />
        </span>
    }));
  }, [stateFips]);
  const trackingOpts = {
    context: 'DelegatePopularVote'
  };
  return <div className={classes.header}>
      <h3 className={classes.state}>
        <ElectionLink to={`state:${stateFips}:${office}`} tracking={trackingOpts}>
          <ResponsiveText text={stateNames} />
        </ElectionLink>
      </h3>
      <div className={classes.metadata}>
        <IfActive active={!!totalDelegates}>
          <div className={classes.delegates}>
            {`${formatNumber(totalDelegates)} dels`}
          </div>
        </IfActive>

        <div className={classes.pctIn}>
          <ResultsVoteIn id={contestId} format="short" />
        </div>
      </div>
    </div>;
};
export default Header;