import { useMemo } from 'react';
import { useContainerBreakpointIsAtMost } from "../../../../hooks/breakpoint/index.js";
import cx from "../../../../utils/css/cx.js";
import { formatNumber, getPartyName } from "../../../../utils/election/index.js";
import IfActive from "../../../application/IfActive/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const Label = function Label(props) {
  const {
    count,
    total,
    name,
    party,
    notUp,
    pop,
    forceSimpler
  } = props;
  const atMostSm = useContainerBreakpointIsAtMost('sm');
  const atMostMd = useContainerBreakpointIsAtMost('md');
  const pctNum = total === 0 ? 0 : count / total;
  const pct = formatNumber(pctNum, {
    format: 'percent'
  });
  const residents = useMemo(() => {
    const partyName = getPartyName(party);
    const popString = formatNumber(pop, {
      format: 'abbreviation',
      abbreviation: atMostMd ? 'letter' : 'word',
      roundTo: atMostMd ? 0 : 1
    });
    const delimeter = atMostSm ? ' ' : ' | ';
    if (party === 'gop' && !atMostSm) {
      return `${delimeter}${popString} residents`;
    }
    if (party === 'gop' && atMostSm) {
      return `${delimeter}${popString} by ${partyName}`;
    }
    const residentsString = atMostSm ? '' : ' residents';
    return `${delimeter}${popString}${residentsString} governed by ${partyName}s`;
  }, [party, pop, atMostSm, atMostMd]);
  return <div className={cls('label', party, {
    isSecondary: forceSimpler
  })}>
      <div className={cls('name')}>
        <span>
          {name}
        </span>
      </div>

      <div className={cls('number')}>
        {pct}
      </div>

      <IfActive active={!!notUp && !forceSimpler}>
        <div className={cls('notUp')}>
          {`${notUp} not up`}
          <IfActive active={!atMostSm}>
            <span className={cls('population')}>{residents}</span>
          </IfActive>
        </div>
      </IfActive>

      <IfActive active={atMostSm && !forceSimpler}>
        <div className={cls('population')}>{residents}</div>
      </IfActive>
    </div>;
};
export default Label;