import { useMemo } from 'react';
import sortBy from "../../../../utils/sorting/sortBy.js";
import AutoLayout from "../../../layout/AutoLayout/index.js";
import MapLegendItem from "../../MapLegendItem/index.js";
import CandidateName from "../../CandidateName/index.js";
import classes from './styles.module.scss';
const Legend = function Legend(props) {
  const {
    palettes,
    includeNoClearLeader
  } = props;
  const paletteEntries = useMemo(() => sortBy(palettes, ['palette', 'candidateId']));
  const hasPalettes = paletteEntries.length > 0;
  return <AutoLayout direction="horizontal" align="left" gap="2" wrap margin={{
    t: '2'
  }}>
      {hasPalettes && <div className={classes.title}>
          Leading/Won
        </div>}
      {paletteEntries.map(palette => <MapLegendItem key={palette.candidateId} type="palette" palette={palette.palette} label={<CandidateName id={palette.candidateId} format="short" />} />)}
      {includeNoClearLeader && <MapLegendItem type="unclear" label="No clear leader" />}
    </AutoLayout>;
};
export default Legend;