import { useContestStatus } from "../../../../hooks/election/index.js";
import getElectionPaletteColor from "../../../../utils/colors/getElectionPaletteColor.js";
import getColor from "../../../../utils/colors/getColor.js";
import ElectionIcon from "../../ElectionIcon/index.js";
import classnames from 'classnames';
import { IfActive } from "../../../application/index.js";
import classes from './styles.module.scss';
import typography from '../typography.module.scss';
import partyOptions from './partyOptions';
const Flip = function Flip(props) {
  const {
    contestId,
    size
  } = props;
  const contestStatus = useContestStatus(contestId);
  const {
    winningParty
  } = contestStatus;
  const bg = getElectionPaletteColor(winningParty, 'bgInverse');
  const backgroundColor = getColor(bg);

  // We currently can have flips for parties that aren't dem or gop
  // but we do not want to display anything for those
  if (!partyOptions[winningParty]) {
    return null;
  }
  const {
    text,
    icon
  } = partyOptions[winningParty];
  const iconSize = partyOptions.iconSizes[size];
  const showIcon = size !== '000';
  return <div className={classnames(classes.container, classes[`size-${size}`], classes[winningParty], typography.description, typography.bold)} style={{
    backgroundColor,
    color: 'white'
  }}>
      <IfActive active={showIcon}>
        <ElectionIcon color="white" size={iconSize} type={icon} />
      </IfActive>

      {text[size]}
    </div>;
};
export default Flip;