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

function getSize(el): { width: number; height: number } {
   if (!el) {
      return {
         width: 0,
         height: 0,
      };
   }

   return {
      width: el.offsetWidth,
      height: el.offsetHeight,
   };
}

//
// TODO: adicionar callback para toda atualização do resize useComponentSize
//
// Ao invés de atualizar o componente toda vez que houver uma atualização
//

export function useComponentSize(ref): { width: number; height: number } {
   const [size, setSize] = useState<{ width: number; height: number }>(getSize(ref ? ref.current : {}));

   const handleResize = useCallback(
      function handleResize() {
         if (ref.current) {
            setSize(getSize(ref.current));
         }
      },
      [ref],
   );

   useEffect(() => {
      if (!ref.current) {
         return;
      }

      handleResize();

      window.addEventListener('resize', handleResize);

      return () => {
         window.removeEventListener('resize', handleResize);
      };
   }, [ref]);

   return size;
}
