import { useMemo } from 'react';
import { useContestCollectionContests, useContestCollectionMetadata, useStatePopulations } from "../../../../../hooks/election/index.js";
import { useContainerResponsiveValues } from "../../../../../hooks/breakpoint/index.js";
import normalizeToSegments from './normalizeToSegments';
import mergeWithResults from './mergeWithResults';
import generateGrid from './generateGrid';
const useBopGrid = function useBopGrid(collectionId) {
  const layout = useContainerResponsiveValues({
    xs: [50, 20],
    md: [50, 5],
    lg: [100, 5]
  });
  const data = useContestCollectionContests(collectionId);
  const metadata = useContestCollectionMetadata(collectionId);
  const {
    popAsPct: statePopAsPct,
    incumbents
  } = useStatePopulations();
  const stateSegments = useMemo(() => normalizeToSegments(statePopAsPct, layout), [statePopAsPct, layout]);
  const resultSegments = useMemo(() => mergeWithResults(stateSegments, incumbents, data, metadata), [stateSegments, data, metadata]);
  const grid = useMemo(() => generateGrid(resultSegments, layout), [resultSegments, layout]);
  return grid;
};
export default useBopGrid;