import { FluentIconButton } from "../../inputs/buttons/FluentIconButton.mjs";
import { c } from "react-compiler-runtime";
import React, { Fragment } from "react";
import { Typography, makeStyles } from "@material-ui/core";
import clsx from "clsx";
import { CalculatorMultiplyIcon, PaddingLeftIcon, PaddingRightIcon, TimerIcon } from "@fluentui/react-icons";
//#region src/UI/surfaces/NestedGrid/NestedGrid.jsx
const useStyles = makeStyles((theme) => ({
	root: { marginTop: 32 },
	nestedWrapper: { display: "grid" },
	columnAdornment: {
		borderLeft: `4px solid ${theme.palette.secondary.main}`,
		borderTop: `4px solid ${theme.palette.secondary.main}`
	},
	detailHeader: {
		padding: theme.spacing(1),
		color: "white",
		background: theme.palette.grey.dark
	},
	detailHeaderActive: { background: theme.palette.secondary.main },
	columnHeaderWrapper: { display: "flex" },
	columnTitle: {
		flex: 1,
		display: "flex",
		paddingTop: theme.spacing(1)
	},
	icon: { color: theme.palette.common.white },
	expandIcon: {
		marginLeft: theme.spacing(2),
		marginTop: theme.spacing(-1)
	}
}));
const NestParent = (t0) => {
	const $ = c(8);
	const { parentTitle, children, showDetail } = t0;
	const classes = useStyles();
	let t1;
	if ($[0] !== classes.detailHeader || $[1] !== parentTitle || $[2] !== showDetail) {
		t1 = showDetail && /* @__PURE__ */ React.createElement("div", { className: classes.detailHeader }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, " ", parentTitle, " "));
		$[0] = classes.detailHeader;
		$[1] = parentTitle;
		$[2] = showDetail;
		$[3] = t1;
	} else t1 = $[3];
	let t2;
	if ($[4] !== children || $[5] !== classes.root || $[6] !== t1) {
		t2 = /* @__PURE__ */ React.createElement("div", { className: classes.root }, t1, children);
		$[4] = children;
		$[5] = classes.root;
		$[6] = t1;
		$[7] = t2;
	} else t2 = $[7];
	return t2;
};
const NestWrapper = (t0) => {
	const $ = c(6);
	const { children, columnFr } = t0;
	const classes = useStyles();
	const t1 = `1fr ${columnFr}fr`;
	let t2;
	if ($[0] !== t1) {
		t2 = { gridTemplateColumns: t1 };
		$[0] = t1;
		$[1] = t2;
	} else t2 = $[1];
	let t3;
	if ($[2] !== children || $[3] !== classes.nestedWrapper || $[4] !== t2) {
		t3 = /* @__PURE__ */ React.createElement("div", {
			className: classes.nestedWrapper,
			style: t2
		}, children);
		$[2] = children;
		$[3] = classes.nestedWrapper;
		$[4] = t2;
		$[5] = t3;
	} else t3 = $[5];
	return t3;
};
const toggleHeader = (type, setShowDetail, setColumnFr) => {
	if (type === "open") {
		setShowDetail(true);
		setColumnFr(4);
	} else {
		setShowDetail(false);
		setColumnFr(0);
	}
};
const NestedGrid = (t0) => {
	const $ = c(16);
	const { children, setShowDetail, setColumnFr, columnFr, childTitle, showDetail } = t0;
	const classes = useStyles();
	let t1;
	if ($[0] !== setColumnFr || $[1] !== setShowDetail) {
		t1 = (type) => {
			if (type === "open") {
				setShowDetail(true);
				setColumnFr(4);
			} else {
				setShowDetail(false);
				setColumnFr(0);
			}
		};
		$[0] = setColumnFr;
		$[1] = setShowDetail;
		$[2] = t1;
	} else t1 = $[2];
	const toggleHeader = t1;
	let t2;
	if ($[3] !== columnFr || $[4] !== setColumnFr) {
		t2 = () => {
			if (columnFr === 4) setColumnFr(1);
			else setColumnFr(4);
		};
		$[3] = columnFr;
		$[4] = setColumnFr;
		$[5] = t2;
	} else t2 = $[5];
	const toggleWide = t2;
	let t3;
	if ($[6] !== childTitle || $[7] !== children || $[8] !== classes || $[9] !== columnFr || $[10] !== showDetail || $[11] !== toggleHeader || $[12] !== toggleWide) {
		t3 = showDetail && /* @__PURE__ */ React.createElement("div", { className: classes.columnAdornment }, /* @__PURE__ */ React.createElement("div", { className: clsx(classes.detailHeader, classes.detailHeaderActive) }, /* @__PURE__ */ React.createElement("div", { className: classes.columnHeaderWrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.columnTitle }, /* @__PURE__ */ React.createElement(TimerIcon, { style: { marginRight: 8 } }), /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, childTitle), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
			className: clsx(classes.icon, classes.expandIcon),
			icon: columnFr === 4 ? PaddingRightIcon : PaddingLeftIcon,
			onClick: toggleWide
		}))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
			style: {
				color: "white",
				marginRight: 8
			},
			icon: CalculatorMultiplyIcon,
			onClick: () => toggleHeader("close")
		})))), children);
		$[6] = childTitle;
		$[7] = children;
		$[8] = classes;
		$[9] = columnFr;
		$[10] = showDetail;
		$[11] = toggleHeader;
		$[12] = toggleWide;
		$[13] = t3;
	} else t3 = $[13];
	let t4;
	if ($[14] !== t3) {
		t4 = /* @__PURE__ */ React.createElement(Fragment, null, t3);
		$[14] = t3;
		$[15] = t4;
	} else t4 = $[15];
	return t4;
};
//#endregion
export { NestParent, NestWrapper, NestedGrid, toggleHeader };

//# sourceMappingURL=NestedGrid.mjs.map