import { useMemo } from 'react';
import { useCandidateMetadata } from "../../../../../hooks/election/index.js";
import cx from "../../../../../utils/css/cx.js";
import getElectionPaletteCssVariables from "../../../../../utils/css/getElectionPaletteCssVariables.js";
import CellBar from './CellBar';
import CellCount from './CellCount';
import CellName from './CellName';
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const DelegateRow = function DelegateRow(props) {
  const {
    id: candidateId,
    isDropped,
    total,
    threshold,
    highestCandidateTotal,
    componentWidth
  } = props;
  const candidateData = useCandidateMetadata(candidateId);
  const [pct, remaining, atThreshold] = useMemo(() => {
    if (!threshold) {
      return [0, 0, false];
    }
    const barMax = Math.max(threshold, highestCandidateTotal);
    return [total / barMax, barMax - total, total >= threshold];
  }, [total, threshold]);
  if (!candidateData) {
    return null;
  }
  const {
    customColor
  } = candidateData;
  const styleVars = getElectionPaletteCssVariables(customColor);
  const cellProps = {
    ...props,
    pct,
    remaining,
    atThreshold,
    customColor,
    isDropped,
    highestCandidateTotal
  };
  return <div role="row" className={cls('delegate-row', {
    'at-threshold': atThreshold
  })} style={isDropped ? undefined : styleVars}>
      <CellName {...cellProps} />
      <CellCount {...cellProps} componentWidth={componentWidth} />
      <CellBar {...cellProps} />
    </div>;
};
export default DelegateRow;