import { useState, useEffect } from 'react';

interface Size {
  width: number | undefined;
  height: number | undefined;
}

export const getElementHeightLineHeightRatio = (refDom: React.RefObject<any>) => {
  if (!refDom.current) return 0;
  return (
    refDom.current.scrollHeight /
    parseInt(
      window
        .getComputedStyle(refDom.current)
        .lineHeight.substring(0, window.getComputedStyle(refDom.current).lineHeight.length - 2)
    )
  );
};

export const useWindowSize = (): Size => {
  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
  const [windowSize, setWindowSize] = useState<Size>({
    width: undefined,
    height: undefined
  });
  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }
    window.addEventListener('resize', handleResize);
    handleResize();
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  return windowSize;
};