import { FluentIconButton } from "../inputs/buttons/FluentIconButton.mjs";
import { useShellStore } from "../../stores/shellStore.mjs";
import { useActionState } from "../../hooks/useActions.mjs";
import { InquiryHeaderSecondaryTarget } from "../../utilities/utilityBar/InquiryHeaderSecondary.mjs";
import { InquiryHeaderSecondaryAlertTarget } from "../../utilities/utilityBar/InquiryHeaderSecondaryAlert.mjs";
import { SubHeaderActionsTarget } from "../../utilities/utilityBar/SubHeaderAction.mjs";
import { InquiryHeaderTitleTarget } from "../../utilities/utilityBar/InquiryHeaderTitle.mjs";
import { InquiryHeaderControlTarget } from "../../utilities/utilityBar/InquiryHeaderControl.mjs";
import { c } from "react-compiler-runtime";
import React from "react";
import { Card, Collapse, Divider, makeStyles } from "@material-ui/core";
import clsx from "clsx";
import { ChevronDownIcon, ChevronUpIcon } from "@fluentui/react-icons";
//#region src/UI/utilityDisplay/UtilityBar.jsx
const useStyles = makeStyles((theme) => ({
	root: {},
	bar: {
		display: "flex",
		flexDirection: "row"
	},
	gutters: { paddingLeft: theme.spacing(2) },
	content: {
		flex: 1,
		width: "100%"
	},
	collapsed: {
		height: 0,
		transition: theme.transitions.create("height", {
			easing: theme.transitions.easing.easeOut,
			duration: theme.transitions.duration.leavingScreen
		})
	},
	expanded: { transition: theme.transitions.create("height", {
		easing: theme.transitions.easing.easeIn,
		duration: theme.transitions.duration.enteringScreen
	}) },
	open: {
		display: "flex",
		justifyContent: "flex-end"
	},
	toggleButton: {
		position: "absolute",
		right: theme.spacing(1),
		top: theme.spacing(1)
	},
	cardRoot: { "&:last-child": { paddingBottom: theme.spacing(1) } },
	chevronButtonOpen: {
		display: "flex",
		justifyContent: "center",
		marginLeft: 25,
		zIndex: theme.zIndex.appBar
	},
	chevronButtonClosed: {
		position: "absolute",
		left: "50%",
		top: 11,
		zIndex: theme.zIndex.appBar
	},
	chevronButtonClosedLower: {
		display: "flex",
		justifyContent: "center",
		marginLeft: 25,
		zIndex: theme.zIndex.appBar
	},
	inquiryHeader: {
		display: "flex",
		flexDirection: "column"
	}
}), { name: "UtilityBar" });
const UtilityBar = (props) => {
	const $ = c(35);
	const classes = useStyles(props);
	const { className, gutters: t0, expander, toggleOne, toggleTwo, closePrimary: t1, closeSecondary: t2, expanded: t3, expandedSecondary, setExpanded, setExpandedSecondary } = props;
	const gutters = t0 === void 0 ? true : t0;
	const closePrimary = t1 === void 0 ? false : t1;
	const closeSecondary = t2 === void 0 ? false : t2;
	const expanded = t3 === void 0 ? true : t3;
	const { pageSplitScreen } = useActionState() || {};
	const shaHasChildren = useShellStore(_temp);
	const t4 = gutters && classes.gutters;
	let t5;
	if ($[0] !== className || $[1] !== classes.bar || $[2] !== t4) {
		t5 = clsx(classes.bar, t4, className);
		$[0] = className;
		$[1] = classes.bar;
		$[2] = t4;
		$[3] = t5;
	} else t5 = $[3];
	const t6 = pageSplitScreen?.open ? 1100 : "";
	let t7;
	if ($[4] !== t6) {
		t7 = { zIndex: t6 };
		$[4] = t6;
		$[5] = t7;
	} else t7 = $[5];
	let t8;
	if ($[6] !== classes.actions || $[7] !== expander || $[8] !== shaHasChildren) {
		t8 = !expander && /* @__PURE__ */ React.createElement(Card, { variant: `${shaHasChildren ? "outlined" : "elevation"}` }, /* @__PURE__ */ React.createElement(SubHeaderActionsTarget, { className: classes.actions }));
		$[6] = classes.actions;
		$[7] = expander;
		$[8] = shaHasChildren;
		$[9] = t8;
	} else t8 = $[9];
	let t9;
	if ($[10] !== classes.actions || $[11] !== classes.card || $[12] !== classes.chevronButtonClosed || $[13] !== classes.chevronButtonClosedLower || $[14] !== classes.chevronButtonOpen || $[15] !== classes.icon || $[16] !== classes.inquiryHeader || $[17] !== closePrimary || $[18] !== closeSecondary || $[19] !== expanded || $[20] !== expandedSecondary || $[21] !== expander || $[22] !== setExpanded || $[23] !== setExpandedSecondary || $[24] !== toggleOne || $[25] !== toggleTwo) {
		t9 = expander && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Card, {
			className: classes.card,
			square: true
		}, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(InquiryHeaderTitleTarget, null), /* @__PURE__ */ React.createElement(Collapse, {
			in: closePrimary,
			timeout: "auto"
		}, /* @__PURE__ */ React.createElement(SubHeaderActionsTarget, { className: classes.actions })), toggleOne && /* @__PURE__ */ React.createElement("div", { className: clsx(expanded ? classes.chevronButtonOpen : classes.chevronButtonClosed) }, /* @__PURE__ */ React.createElement(FluentIconButton, {
			onClick: setExpanded,
			icon: expanded ? ChevronUpIcon : ChevronDownIcon,
			className: classes.icon
		}))), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(Collapse, {
			in: closeSecondary,
			timeout: "auto"
		}, /* @__PURE__ */ React.createElement("div", { className: classes.inquiryHeader }, /* @__PURE__ */ React.createElement(InquiryHeaderSecondaryTarget, { className: classes.actions }), /* @__PURE__ */ React.createElement(InquiryHeaderSecondaryAlertTarget, { className: classes.actions }))), /* @__PURE__ */ React.createElement(InquiryHeaderControlTarget, null), toggleTwo && /* @__PURE__ */ React.createElement("div", { className: clsx(expandedSecondary ? classes.chevronButtonOpen : classes.chevronButtonClosedLower) }, /* @__PURE__ */ React.createElement(FluentIconButton, {
			onClick: setExpandedSecondary,
			icon: expandedSecondary ? ChevronUpIcon : ChevronDownIcon,
			className: classes.icon
		}))));
		$[10] = classes.actions;
		$[11] = classes.card;
		$[12] = classes.chevronButtonClosed;
		$[13] = classes.chevronButtonClosedLower;
		$[14] = classes.chevronButtonOpen;
		$[15] = classes.icon;
		$[16] = classes.inquiryHeader;
		$[17] = closePrimary;
		$[18] = closeSecondary;
		$[19] = expanded;
		$[20] = expandedSecondary;
		$[21] = expander;
		$[22] = setExpanded;
		$[23] = setExpandedSecondary;
		$[24] = toggleOne;
		$[25] = toggleTwo;
		$[26] = t9;
	} else t9 = $[26];
	let t10;
	if ($[27] !== classes.content || $[28] !== t7 || $[29] !== t8 || $[30] !== t9) {
		t10 = /* @__PURE__ */ React.createElement("div", {
			className: classes.content,
			style: t7
		}, t8, t9);
		$[27] = classes.content;
		$[28] = t7;
		$[29] = t8;
		$[30] = t9;
		$[31] = t10;
	} else t10 = $[31];
	let t11;
	if ($[32] !== t10 || $[33] !== t5) {
		t11 = /* @__PURE__ */ React.createElement("div", { className: t5 }, t10);
		$[32] = t10;
		$[33] = t5;
		$[34] = t11;
	} else t11 = $[34];
	return t11;
};
function _temp(state) {
	return state.subHeaderActionHasChildren;
}
//#endregion
export { UtilityBar };

//# sourceMappingURL=UtilityBar.mjs.map