import { useTheme } from '@material-ui/core/styles';
import { useLayoutEffect, useState } from 'react';
import PropTypes from 'prop-types';
/**
 * Custom hook that returns the current breakpoint of a provided element's width and helpers to compare against breakpoints.
 * @param {any} ref - The ref object whose current element will be observed for width changes.
 * @returns {{
 *   currentBreakpoint: string | null,
 *   isBreakpointUp: (breakpoint: string) => boolean,
 *   isBreakpointDown: (breakpoint: string) => boolean,
 * }}
 */
function useElementWidth(ref) {
    const theme = useTheme();
    const [width, setWidth] = useState(null);
    useLayoutEffect(() => {
        const resizeObserver = new ResizeObserver(entries => {
            for (let entry of entries) {
                if (entry.target === ref.current) {
                    setWidth(entry.contentRect.width);
                }
            }
        });
        resizeObserver.observe(ref.current);
        return () => {
            resizeObserver.unobserve(ref.current);
        };
    }, [ref]);
    const currentBreakpoint = width !== null
        ? Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
            if (width >= theme.breakpoints.values[breakpoint]) {
                return breakpoint;
            }
            return acc;
        }, null)
        : null;
    const isBreakpointUp = breakpoint => {
        const breakpoints = Object.keys(theme.breakpoints.values);
        const index = breakpoints.indexOf(breakpoint);
        const currentIndex = breakpoints.indexOf(currentBreakpoint);
        return index <= currentIndex;
    };
    const isBreakpointDown = breakpoint => {
        const breakpoints = Object.keys(theme.breakpoints.values);
        const index = breakpoints.indexOf(breakpoint);
        const currentIndex = breakpoints.indexOf(currentBreakpoint);
        return index >= currentIndex;
    };
    return {
        currentBreakpoint,
        isBreakpointUp,
        isBreakpointDown,
    };
}
export { useElementWidth };
useElementWidth.propTypes = {
    ref: PropTypes.shape({
        current: PropTypes.instanceOf(Element),
    }),
};
//# sourceMappingURL=useElementWidth.js.map