import classnames from 'classnames';
import { useContestCandidateColors, useCandidateCallStatus, useContestMetadata } from "../../../../hooks/election/index.js";
import getElectionPaletteCssVariables from "../../../../utils/css/getElectionPaletteCssVariables.js";
import { IfActive } from "../../../application/index.js";
import { useResultsTableFormatContext } from '../context';
import classes from './styles.module.scss';
import VoteBar from '../VoteBar';
const RowWrapper = function RowWrapper(props) {
  const {
    children,
    id,
    candidateId,
    idx
  } = props;
  const {
    size,
    format,
    showBar,
    hasRowPaddingRight
  } = useResultsTableFormatContext();
  const candidateColors = useContestCandidateColors(id);
  const palette = candidateColors && candidateColors[candidateId];
  const styleVars = getElectionPaletteCssVariables(palette);
  const candidateStatus = useCandidateCallStatus(id, candidateId);
  const meta = useContestMetadata(id);
  const isUncontested = meta && meta.isUncontested;
  const highlightRow = candidateStatus === 'winner' || candidateStatus === 'runoff';
  const hasBorderBottom = format !== 'condensed' && format !== 'tooltip' && !!candidateId && !highlightRow;
  return <>
      <div role="row" className={classnames(classes.container, classes[format], classes[size], {
      [classes.highlighted]: highlightRow,
      [classes['has-x-padding']]: hasRowPaddingRight,
      [classes['has-border-bottom']]: hasBorderBottom,
      [classes['is-not-first-row']]: idx !== 0,
      [classes['is-uncontested']]: isUncontested
    })} style={styleVars}>
        {children}
        <IfActive active={showBar}>
          <VoteBar id={id} candidateId={candidateId} />
        </IfActive>
      </div>
    </>;
};
export default RowWrapper;