import { useEffect, useRef } from 'react';
import { IfActive } from "../../../application/index.js";
import ReporterNote from "../../ReporterNote/index.js";
import Block from './Block';
import classes from './styles.module.scss';
import DistrictHeader from './DistrictHeader';
const District = function District(props) {
  const {
    stateFips,
    districtNumber,
    annotation,
    blocks,
    activeDistrict,
    setActiveDistrict,
    leaderboardProps
  } = props;
  const ref = useRef();
  useEffect(() => {
    if (!activeDistrict || !districtNumber) return;
    if (activeDistrict !== districtNumber) return;
    if (!ref.current) return;
    ref.current.scrollIntoView({
      behavior: 'smooth',
      block: 'center'
    });
    setActiveDistrict(undefined);
  }, [districtNumber, activeDistrict, setActiveDistrict]);
  return <div ref={ref}>
      <DistrictHeader stateFips={stateFips} districtNumber={districtNumber} blocks={blocks} />
      <IfActive active={!!annotation}>
        <div className={classes.reporterNote}>
          <ReporterNote {...annotation} layout="vertical-bottom" disableAvatar />
        </div>
      </IfActive>

      <div className={classes.contests}>
        {blocks.map(block => <Block key={block.id} stateFips={stateFips} districtNumber={districtNumber} party={block.party} contestId={block.contestId} note={block.note} leaderboardProps={leaderboardProps} />)}
      </div>
    </div>;
};
export default District;