import ContestName from "../../../ContestName/index.jsx";
import { useGetMapFills } from "../../../../../hooks/election/index.js";
import cx from "../../../../../utils/css/cx.js";
import { TooltipTrigger } from "../../../../structure/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const SpecialElection = function SpecialElection(props) {
  const {
    election,
    colors,
    contestLevel,
    tooltip
  } = props;
  const {
    contestId,
    code
  } = election;
  const getMapFills = useGetMapFills(colors);
  const nameFormat = contestLevel === 'house' ? 'short' : 'tiny';
  const specialWidth = 16;
  const svgWidth = Math.sqrt(2 * specialWidth ** 2);
  const half = svgWidth / 2;
  const points = [[0, half], [half, 0], [svgWidth, half], [half, svgWidth]].map(p => p.toString()).join(' ');
  const strokeBuffer = 2;
  return <>
      <TooltipTrigger tooltip={tooltip} props={election}>
        <div className={classes.gridItem}>
          <p>
            <ContestName format={nameFormat} id={contestId} />
          </p>
        </div>
      </TooltipTrigger>
      <TooltipTrigger tooltip={tooltip} props={election}>
        <div className={cls('icon', 'gridItem')}>
          <svg width={svgWidth} height={svgWidth} viewBox={[-1 * strokeBuffer, -1 * strokeBuffer, svgWidth + strokeBuffer * 2, svgWidth + strokeBuffer * 2]}>
            <polygon className={classes.swatch} points={points} {...getMapFills({
            code
          })} />
          </svg>
        </div>
      </TooltipTrigger>
    </>;
};
export default SpecialElection;