import { useBuildEnvironment } from "../../shell/ui/useBuildEnvironment.mjs";
import { AmbientCard } from "../surfaces/cards/AmbientCard/AmbientCard.mjs";
import { SidebarCollapseButton } from "../../shell/ui/SidebarCollapseButton.mjs";
import { UtilityBarInportTarget } from "../../utilities/utilityBar/UtilityBarInport.mjs";
import { c } from "react-compiler-runtime";
import React, { useEffect, useState } from "react";
import { Typography, makeStyles } from "@material-ui/core";
import { ResizableBox } from "react-resizable";
//#region src/UI/utilityDisplay/UtilitySideBar.jsx
const EXPANDED_WIDTH = 288;
const COLLAPSED_WIDTH = 78;
const MAX_WIDTH = 700;
const useStyles = makeStyles((theme) => ({
	resizableBox: {
		position: "relative",
		height: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 56}px)`,
		display: "flex",
		flexDirection: "column",
		minHeight: 0
	},
	root: {
		paddingTop: (props) => props.removePadding || props.sidebarHidden ? 0 : 40,
		overflow: "hidden",
		height: "100%",
		display: "flex",
		flexDirection: "column",
		minHeight: 0
	},
	cardWrapper: {
		flex: 1,
		minHeight: 0,
		display: "flex",
		flexDirection: "column",
		height: "100%"
	},
	headerToggle: {},
	header: {
		display: "flex",
		alignItems: "center",
		justifyContent: "space-between",
		width: "100%"
	},
	headerContent: {
		display: (props) => props.hideTitleBar ? "none" : "flex",
		width: "100%",
		paddingLeft: 12
	},
	title: {
		flex: 1,
		width: "100%",
		paddingTop: 7
	},
	expandedWidth: { width: 288 },
	handle: {
		top: 0,
		right: theme.spacing(-.75),
		width: theme.spacing(.75),
		zIndex: 1e4,
		height: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 56}px)`,
		display: "inline-block",
		position: "absolute",
		"&:hover": { cursor: "col-resize" }
	},
	contentWrapper: {
		display: "flex",
		flexDirection: "column",
		height: "100%",
		minHeight: 0
	},
	utilityContent: {
		flex: 1,
		minHeight: 0,
		display: "flex",
		flexDirection: "column",
		height: "100%"
	}
}));
const UtilitySideBar = (props) => {
	const $ = c(66);
	const { onUtilitySidebarToggleExpandClick, resizable, title, utilitySidebarToggleOverride, isUsingChildren: t0, removeTopLayoutUnit: t1, collapsedWidth, children, sidebarHidden, handleResize: t2 } = props;
	const isUsingChildren = t0 === void 0 ? false : t0;
	const removeTopLayoutUnit = t1 === void 0 ? false : t1;
	const handleResize = t2 === void 0 ? null : t2;
	const t3 = useBuildEnvironment() ? 25 : 0;
	let t4;
	if ($[0] !== props || $[1] !== t3) {
		t4 = {
			...props,
			appRibbonSpace: t3
		};
		$[0] = props;
		$[1] = t3;
		$[2] = t4;
	} else t4 = $[2];
	const classes = useStyles(t4);
	const [expanded, setExpanded] = useState(true);
	const [width, setWidth] = useState(EXPANDED_WIDTH);
	const _collapsedWidth = collapsedWidth ?? COLLAPSED_WIDTH;
	let t5;
	if ($[3] !== handleResize) {
		t5 = (event, t6) => {
			const { size } = t6;
			setWidth(size.width);
			if (handleResize) handleResize(size.width);
		};
		$[3] = handleResize;
		$[4] = t5;
	} else t5 = $[4];
	const onResize = t5;
	let t6;
	if ($[5] !== onUtilitySidebarToggleExpandClick) {
		t6 = () => {
			if (onUtilitySidebarToggleExpandClick) onUtilitySidebarToggleExpandClick();
			setExpanded(_temp);
		};
		$[5] = onUtilitySidebarToggleExpandClick;
		$[6] = t6;
	} else t6 = $[6];
	const handleToggleClick = t6;
	let t7;
	let t8;
	if ($[7] !== utilitySidebarToggleOverride) {
		t7 = () => {
			if (typeof utilitySidebarToggleOverride === "boolean") setExpanded(utilitySidebarToggleOverride);
		};
		t8 = [utilitySidebarToggleOverride];
		$[7] = utilitySidebarToggleOverride;
		$[8] = t7;
		$[9] = t8;
	} else {
		t7 = $[8];
		t8 = $[9];
	}
	useEffect(t7, t8);
	const t9 = expanded ? width : _collapsedWidth;
	let t10;
	if ($[10] !== expanded || $[11] !== resizable) {
		t10 = resizable && expanded ? ["e"] : [];
		$[10] = expanded;
		$[11] = resizable;
		$[12] = t10;
	} else t10 = $[12];
	let t11;
	if ($[13] !== _collapsedWidth || $[14] !== expanded) {
		t11 = expanded ? [EXPANDED_WIDTH] : [_collapsedWidth];
		$[13] = _collapsedWidth;
		$[14] = expanded;
		$[15] = t11;
	} else t11 = $[15];
	let t12;
	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
		t12 = [MAX_WIDTH];
		$[16] = t12;
	} else t12 = $[16];
	let t13;
	if ($[17] !== classes.handle || $[18] !== expanded) {
		t13 = expanded && /* @__PURE__ */ React.createElement("div", { className: classes.handle });
		$[17] = classes.handle;
		$[18] = expanded;
		$[19] = t13;
	} else t13 = $[19];
	const t14 = expanded ? width : _collapsedWidth;
	let t15;
	if ($[20] !== t14) {
		t15 = {
			width: t14,
			height: "100%"
		};
		$[20] = t14;
		$[21] = t15;
	} else t15 = $[21];
	const t16 = removeTopLayoutUnit || sidebarHidden;
	let t17;
	if ($[22] !== classes.headerContent || $[23] !== classes.title || $[24] !== expanded || $[25] !== title) {
		t17 = expanded && /* @__PURE__ */ React.createElement("div", { className: classes.headerContent }, /* @__PURE__ */ React.createElement("div", { className: classes.title }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, " ", title, " ")));
		$[22] = classes.headerContent;
		$[23] = classes.title;
		$[24] = expanded;
		$[25] = title;
		$[26] = t17;
	} else t17 = $[26];
	let t18;
	if ($[27] !== expanded || $[28] !== handleToggleClick) {
		t18 = /* @__PURE__ */ React.createElement(SidebarCollapseButton, {
			id: "udpRecord-UtilitySideBar",
			udprecordid: "udpRecord-UtilitySideBar",
			expanded,
			onClick: handleToggleClick
		});
		$[27] = expanded;
		$[28] = handleToggleClick;
		$[29] = t18;
	} else t18 = $[29];
	let t19;
	if ($[30] !== classes.headerToggle || $[31] !== t18) {
		t19 = /* @__PURE__ */ React.createElement("div", { className: classes.headerToggle }, t18);
		$[30] = classes.headerToggle;
		$[31] = t18;
		$[32] = t19;
	} else t19 = $[32];
	let t20;
	if ($[33] !== classes.header || $[34] !== t17 || $[35] !== t19) {
		t20 = /* @__PURE__ */ React.createElement("div", { className: classes.header }, t17, t19);
		$[33] = classes.header;
		$[34] = t17;
		$[35] = t19;
		$[36] = t20;
	} else t20 = $[36];
	let t21;
	if ($[37] !== isUsingChildren) {
		t21 = !isUsingChildren && /* @__PURE__ */ React.createElement(UtilityBarInportTarget, null);
		$[37] = isUsingChildren;
		$[38] = t21;
	} else t21 = $[38];
	let t22;
	if ($[39] !== children || $[40] !== classes.utilityContent || $[41] !== isUsingChildren) {
		t22 = isUsingChildren && /* @__PURE__ */ React.createElement("div", { className: classes.utilityContent }, children);
		$[39] = children;
		$[40] = classes.utilityContent;
		$[41] = isUsingChildren;
		$[42] = t22;
	} else t22 = $[42];
	let t23;
	if ($[43] !== classes.contentWrapper || $[44] !== t20 || $[45] !== t21 || $[46] !== t22) {
		t23 = /* @__PURE__ */ React.createElement("div", { className: classes.contentWrapper }, t20, t21, t22);
		$[43] = classes.contentWrapper;
		$[44] = t20;
		$[45] = t21;
		$[46] = t22;
		$[47] = t23;
	} else t23 = $[47];
	let t24;
	if ($[48] !== t16 || $[49] !== t23) {
		t24 = /* @__PURE__ */ React.createElement(AmbientCard, {
			fullWidth: true,
			cardHeight: "100%",
			cardContentHeight: "100%",
			removePadding: true,
			lastChildBottomPadding: 12,
			removeTopLayoutUnit: t16
		}, t23);
		$[48] = t16;
		$[49] = t23;
		$[50] = t24;
	} else t24 = $[50];
	let t25;
	if ($[51] !== classes.cardWrapper || $[52] !== t24) {
		t25 = /* @__PURE__ */ React.createElement("div", { className: classes.cardWrapper }, t24);
		$[51] = classes.cardWrapper;
		$[52] = t24;
		$[53] = t25;
	} else t25 = $[53];
	let t26;
	if ($[54] !== classes.root || $[55] !== t15 || $[56] !== t25) {
		t26 = /* @__PURE__ */ React.createElement("div", {
			className: classes.root,
			style: t15
		}, t25);
		$[54] = classes.root;
		$[55] = t15;
		$[56] = t25;
		$[57] = t26;
	} else t26 = $[57];
	let t27;
	if ($[58] !== classes.resizableBox || $[59] !== onResize || $[60] !== t10 || $[61] !== t11 || $[62] !== t13 || $[63] !== t26 || $[64] !== t9) {
		t27 = /* @__PURE__ */ React.createElement(ResizableBox, {
			className: classes.resizableBox,
			width: t9,
			resizeHandles: t10,
			axis: "x",
			minConstraints: t11,
			maxConstraints: t12,
			onResize,
			handle: t13
		}, t26);
		$[58] = classes.resizableBox;
		$[59] = onResize;
		$[60] = t10;
		$[61] = t11;
		$[62] = t13;
		$[63] = t26;
		$[64] = t9;
		$[65] = t27;
	} else t27 = $[65];
	return t27;
};
function _temp(expanded_0) {
	return !expanded_0;
}
//#endregion
export { UtilitySideBar };

//# sourceMappingURL=UtilitySideBar.mjs.map