import { c } from "react-compiler-runtime";
import { useLayoutEffect, useState } from "react";
import PropTypes from "prop-types";
import { useTheme } from "@material-ui/core/styles";
//#region src/UI/dataDisplay/entityHeader/functions/useElementWidth.js
/**
* 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 $ = c(16);
	const theme = useTheme();
	const [width, setWidth] = useState(null);
	let t0;
	let t1;
	if ($[0] !== ref) {
		t0 = () => {
			const resizeObserver = new ResizeObserver((entries) => {
				for (const entry of entries) if (entry.target === ref.current) setWidth(entry.contentRect.width);
			});
			resizeObserver.observe(ref.current);
			return () => {
				resizeObserver.unobserve(ref.current);
			};
		};
		t1 = [ref];
		$[0] = ref;
		$[1] = t0;
		$[2] = t1;
	} else {
		t0 = $[1];
		t1 = $[2];
	}
	useLayoutEffect(t0, t1);
	let t2;
	if ($[3] !== theme || $[4] !== width) {
		t2 = width !== null ? Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
			if (width >= theme.breakpoints.values[breakpoint]) return breakpoint;
			return acc;
		}, null) : null;
		$[3] = theme;
		$[4] = width;
		$[5] = t2;
	} else t2 = $[5];
	const currentBreakpoint = t2;
	let t3;
	if ($[6] !== currentBreakpoint || $[7] !== theme) {
		t3 = (breakpoint_0) => {
			const breakpoints = Object.keys(theme.breakpoints.values);
			return breakpoints.indexOf(breakpoint_0) <= breakpoints.indexOf(currentBreakpoint);
		};
		$[6] = currentBreakpoint;
		$[7] = theme;
		$[8] = t3;
	} else t3 = $[8];
	const isBreakpointUp = t3;
	let t4;
	if ($[9] !== currentBreakpoint || $[10] !== theme) {
		t4 = (breakpoint_1) => {
			const breakpoints_0 = Object.keys(theme.breakpoints.values);
			return breakpoints_0.indexOf(breakpoint_1) >= breakpoints_0.indexOf(currentBreakpoint);
		};
		$[9] = currentBreakpoint;
		$[10] = theme;
		$[11] = t4;
	} else t4 = $[11];
	const isBreakpointDown = t4;
	let t5;
	if ($[12] !== currentBreakpoint || $[13] !== isBreakpointDown || $[14] !== isBreakpointUp) {
		t5 = {
			currentBreakpoint,
			isBreakpointUp,
			isBreakpointDown
		};
		$[12] = currentBreakpoint;
		$[13] = isBreakpointDown;
		$[14] = isBreakpointUp;
		$[15] = t5;
	} else t5 = $[15];
	return t5;
}
useElementWidth.propTypes = { ref: PropTypes.shape({ current: PropTypes.instanceOf(Element) }) };
//#endregion
export { useElementWidth };

//# sourceMappingURL=useElementWidth.mjs.map