import { useMemo, useCallback } from 'react';
import { scaleLinear } from 'd3-scale';
import classes from './styles.module.scss';
import Bar from './Bar';
const Chart = function Chart(props) {
  const {
    statesByDelegates,
    activeFips,
    setActiveFips,
    stateFips,
    labelId
  } = props;
  const resetActiveState = useCallback(() => {
    setActiveFips(stateFips);
  }, [stateFips, setActiveFips]);
  const totalStates = statesByDelegates.length;
  const barScale = useMemo(() => {
    if (totalStates === 0) {
      return undefined;
    }
    const minDels = statesByDelegates[statesByDelegates.length - 1].total;
    const maxDels = statesByDelegates[0].total;
    return scaleLinear().domain([minDels, maxDels]).range([5, 100]);
  }, [statesByDelegates, totalStates]);
  if (!barScale) {
    return null;
  }
  return <div className={classes.container} style={{
    gridTemplateColumns: `repeat(${totalStates}, 1fr)`
  }} role="img" aria-describedby={labelId}>
      {statesByDelegates.map((state, idx) => <Bar key={state.stateFips} stateFips={state.stateFips} activeFips={activeFips} setActiveFips={setActiveFips} resetActiveState={resetActiveState} totalStates={totalStates} idx={idx} barScale={barScale} delegates={state.total} />)}
    </div>;
};
export default Chart;