import {MutableRefObject, useLayoutEffect, useRef, useState} from "react";


type Dimensions = { x: number, y: number, width: number, height: number, top: number } | undefined;

export function useDimensions(deps: any[] = [], liveMeasure: boolean = true): [ MutableRefObject<any>, Dimensions ] {
    const ref = useRef<HTMLElement>();
    const [ dimensions, setDimensions ] = useState()

    useLayoutEffect(() => {
        function measure() {
            setDimensions(ref.current?.getBoundingClientRect().toJSON());
        }

        measure();

        if(liveMeasure) {
            window.addEventListener("resize", measure);
            window.addEventListener("scroll", measure);
        }
        return () => {
            if(liveMeasure) {
                window.removeEventListener("resize", measure);
                window.removeEventListener("scroll", measure);
            }
        }
    }, [ ref.current, liveMeasure, ...deps ])

    return [ ref, dimensions ]
}