import {
  useLayoutEffect,
  useState,
} from 'react';
import useMeasure from 'react-use-measure';

import { ResizeObserver } from '@juggle/resize-observer';

// Helper hook to monitor container ref width and calculate pixel value from percent or number.
export const useWidth = (origWidth: string | number) => {
  const [ref, { width }] = useMeasure({
    debounce: 20,
    polyfill: ResizeObserver,
  });
  const [r, setR] = useState<any>(width);
  useLayoutEffect(() => {
    const w = typeof origWidth === 'number'
      ? origWidth
      : origWidth.includes('%')
        ? width * (parseInt(origWidth, 10) / 100)
        : parseInt(origWidth, 10);
    setR(w);
  }, [origWidth, width]);
  return [ref, r];
}