import { createRef, RefObject, useCallback, useEffect, useState } from 'react';

function useColumnLefts<T extends HTMLElement>(
  numColumns?: number
): [number[], RefObject<T>[]] {
  const [refs, setRefs] = useState<RefObject<T>[]>([]);
  const [lefts, setLefts] = useState<number[]>([]);

  useEffect(() => {
    setRefs(
      Array(numColumns)
        .fill(0)
        .map(() => createRef<T>())
    );
    setLefts(Array(numColumns).fill(0));
  }, [numColumns]);

  const getDimensions = useCallback(() => {
    const columnWidths = refs.map(ref =>
      ref.current !== null ? ref.current.offsetWidth : 0
    );
    const cummulativeWidths = columnWidths.map((_, i, arr) => {
      if (i === 0) return 0;
      return arr
        .slice(0, i)
        .reduce((prevValue, currValue) => prevValue + currValue);
    });

    setLefts(cummulativeWidths);
  }, [refs]);

  useEffect(() => {
    getDimensions();
    window.addEventListener('resize', getDimensions);

    return () => window.removeEventListener('resize', getDimensions);
  }, [getDimensions]);

  return [lefts, refs];
}

export default useColumnLefts;