import { FluentIcon } from "../../utilities/iconLibrary/FluentIcon.mjs";
import { Typography as Typography$1 } from "./typography/Typography.mjs";
import { LayoutUnit } from "../../layout/LayoutUnit.mjs";
import { FluentCheckbox } from "../inputs/checkbox/FluentCheckbox.mjs";
import { c } from "react-compiler-runtime";
import React, { useState } from "react";
import { Collapse, Divider, makeStyles } from "@material-ui/core";
import clsx from "clsx";
import { ChevronDownIcon } from "@fluentui/react-icons";
//#region src/UI/dataDisplay/FluentListItem.jsx
const useStyles = makeStyles((theme) => ({
	root: { height: theme.spacing(5) },
	wrapper: {
		display: "flex",
		flexDirection: "row"
	},
	titleWrapper: {
		display: "flex",
		width: "100%",
		textAlign: "left",
		alignItems: "center"
	},
	title: { flex: 1 },
	progress: {
		height: 2,
		"&::after": {
			content: `''`,
			display: "block",
			background: theme.palette.secondary.main,
			width: (props) => props.progress / props.total * 425,
			height: "100%"
		}
	},
	iconStart: { marginRight: theme.spacing(1) },
	iconEnd: { marginLeft: theme.spacing(1) },
	expand: {
		transform: "rotate(0deg)",
		transition: theme.transitions.create("transform", { duration: theme.transitions.duration.shortest })
	},
	expandOpen: { transform: "rotate(180deg)" },
	iconSpace: { width: theme.spacing(2.75) },
	valueWrapper: {
		display: "flex",
		alignItems: "center"
	},
	valueIcon: { marginRight: theme.spacing(1) },
	checkbox: {
		marginRight: theme.spacing(1),
		padding: "0px"
	}
}), { name: "FluentListItem" });
const FluentListItem = (props) => {
	const $ = c(84);
	const classes = useStyles(props);
	const { subject, value, visualization, boldSubject: t0, expandable: t1, valueTextColor, icon, iconColor, iconEnd: t2, valueIcon, valueIconColor, hideDivider: t3, children, expandedDefaultValue: t4, keepIconLeftSpace: t5, keepIconRightSpace: t6, defaultChecked: t7, onCheckEvent } = props;
	const boldSubject = t0 === void 0 ? true : t0;
	const expandable = t1 === void 0 ? false : t1;
	const iconEnd = t2 === void 0 ? true : t2;
	const hideDivider = t3 === void 0 ? false : t3;
	const expandedDefaultValue = t4 === void 0 ? false : t4;
	const keepIconLeftSpace = t5 === void 0 ? false : t5;
	const keepIconRightSpace = t6 === void 0 ? false : t6;
	const defaultChecked = t7 === void 0 ? false : t7;
	const [expandItem, setExpandItem] = useState(expandedDefaultValue);
	let t8;
	if ($[0] !== expandItem) {
		t8 = () => {
			setExpandItem(!expandItem);
		};
		$[0] = expandItem;
		$[1] = t8;
	} else t8 = $[1];
	const t9 = expandable ? t8 : null;
	let t10;
	if ($[2] !== classes.iconSpace || $[3] !== expandable || $[4] !== iconEnd || $[5] !== keepIconLeftSpace) {
		t10 = keepIconLeftSpace && (!expandable || iconEnd) && /* @__PURE__ */ React.createElement("div", { className: classes.iconSpace });
		$[2] = classes.iconSpace;
		$[3] = expandable;
		$[4] = iconEnd;
		$[5] = keepIconLeftSpace;
		$[6] = t10;
	} else t10 = $[6];
	let t11;
	if ($[7] !== classes.checkbox || $[8] !== defaultChecked || $[9] !== onCheckEvent) {
		t11 = onCheckEvent && /* @__PURE__ */ React.createElement(FluentCheckbox, {
			defaultChecked,
			onChange: onCheckEvent,
			className: classes.checkbox
		});
		$[7] = classes.checkbox;
		$[8] = defaultChecked;
		$[9] = onCheckEvent;
		$[10] = t11;
	} else t11 = $[10];
	let t12;
	if ($[11] !== classes.expand || $[12] !== classes.expandOpen || $[13] !== classes.iconStart || $[14] !== expandItem || $[15] !== expandable || $[16] !== icon || $[17] !== iconColor || $[18] !== iconEnd) {
		t12 = (icon || expandable) && !iconEnd && /* @__PURE__ */ React.createElement(FluentIcon, {
			component: expandable ? ChevronDownIcon : icon,
			color: iconColor,
			className: clsx(classes.iconStart, {
				[classes.expand]: expandable,
				[classes.expandOpen]: expandable && expandItem
			}),
			size: "small"
		});
		$[11] = classes.expand;
		$[12] = classes.expandOpen;
		$[13] = classes.iconStart;
		$[14] = expandItem;
		$[15] = expandable;
		$[16] = icon;
		$[17] = iconColor;
		$[18] = iconEnd;
		$[19] = t12;
	} else t12 = $[19];
	let t13;
	if ($[20] !== boldSubject || $[21] !== subject) {
		t13 = boldSubject ? /* @__PURE__ */ React.createElement("strong", null, subject) : subject;
		$[20] = boldSubject;
		$[21] = subject;
		$[22] = t13;
	} else t13 = $[22];
	let t14;
	if ($[23] !== t13) {
		t14 = /* @__PURE__ */ React.createElement(Typography$1, { variant: "body1" }, t13);
		$[23] = t13;
		$[24] = t14;
	} else t14 = $[24];
	let t15;
	if ($[25] !== classes.title || $[26] !== t14) {
		t15 = /* @__PURE__ */ React.createElement("div", { className: classes.title }, t14);
		$[25] = classes.title;
		$[26] = t14;
		$[27] = t15;
	} else t15 = $[27];
	let t16;
	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
		t16 = /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" });
		$[28] = t16;
	} else t16 = $[28];
	let t17;
	if ($[29] !== classes.valueIcon || $[30] !== valueIcon || $[31] !== valueIconColor) {
		t17 = valueIcon && /* @__PURE__ */ React.createElement(FluentIcon, {
			component: valueIcon,
			color: valueIconColor,
			className: classes.valueIcon,
			size: "small"
		});
		$[29] = classes.valueIcon;
		$[30] = valueIcon;
		$[31] = valueIconColor;
		$[32] = t17;
	} else t17 = $[32];
	let t18;
	if ($[33] !== value || $[34] !== valueTextColor) {
		t18 = /* @__PURE__ */ React.createElement(Typography$1, {
			variant: "body1",
			color: valueTextColor
		}, value);
		$[33] = value;
		$[34] = valueTextColor;
		$[35] = t18;
	} else t18 = $[35];
	let t19;
	if ($[36] !== classes.valueWrapper || $[37] !== t17 || $[38] !== t18) {
		t19 = /* @__PURE__ */ React.createElement("div", { className: classes.valueWrapper }, t17, t18);
		$[36] = classes.valueWrapper;
		$[37] = t17;
		$[38] = t18;
		$[39] = t19;
	} else t19 = $[39];
	let t20;
	if ($[40] !== classes.expand || $[41] !== classes.expandOpen || $[42] !== classes.iconEnd || $[43] !== expandItem || $[44] !== expandable || $[45] !== icon || $[46] !== iconColor || $[47] !== iconEnd) {
		t20 = (icon || expandable) && iconEnd && /* @__PURE__ */ React.createElement(FluentIcon, {
			component: expandable ? ChevronDownIcon : icon,
			color: iconColor,
			className: clsx(classes.iconEnd, {
				[classes.expand]: expandable,
				[classes.expandOpen]: expandable && expandItem
			}),
			size: "small"
		});
		$[40] = classes.expand;
		$[41] = classes.expandOpen;
		$[42] = classes.iconEnd;
		$[43] = expandItem;
		$[44] = expandable;
		$[45] = icon;
		$[46] = iconColor;
		$[47] = iconEnd;
		$[48] = t20;
	} else t20 = $[48];
	let t21;
	if ($[49] !== classes.iconSpace || $[50] !== expandable || $[51] !== iconEnd || $[52] !== keepIconRightSpace) {
		t21 = keepIconRightSpace && (!expandable || !iconEnd) && /* @__PURE__ */ React.createElement("div", { className: classes.iconSpace });
		$[49] = classes.iconSpace;
		$[50] = expandable;
		$[51] = iconEnd;
		$[52] = keepIconRightSpace;
		$[53] = t21;
	} else t21 = $[53];
	let t22;
	if ($[54] !== classes.titleWrapper || $[55] !== t10 || $[56] !== t11 || $[57] !== t12 || $[58] !== t15 || $[59] !== t19 || $[60] !== t20 || $[61] !== t21) {
		t22 = /* @__PURE__ */ React.createElement("div", { className: classes.titleWrapper }, t10, t11, t12, t15, t16, t19, t20, t21);
		$[54] = classes.titleWrapper;
		$[55] = t10;
		$[56] = t11;
		$[57] = t12;
		$[58] = t15;
		$[59] = t19;
		$[60] = t20;
		$[61] = t21;
		$[62] = t22;
	} else t22 = $[62];
	let t23;
	if ($[63] !== classes.wrapper || $[64] !== t22) {
		t23 = /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, t22);
		$[63] = classes.wrapper;
		$[64] = t22;
		$[65] = t23;
	} else t23 = $[65];
	let t24;
	if ($[66] === Symbol.for("react.memo_cache_sentinel")) {
		t24 = /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" });
		$[66] = t24;
	} else t24 = $[66];
	let t25;
	if ($[67] !== classes.progress || $[68] !== hideDivider || $[69] !== visualization) {
		t25 = !hideDivider && /* @__PURE__ */ React.createElement(Divider, { className: visualization && classes.progress });
		$[67] = classes.progress;
		$[68] = hideDivider;
		$[69] = visualization;
		$[70] = t25;
	} else t25 = $[70];
	let t26;
	if ($[71] !== classes.root || $[72] !== t23 || $[73] !== t25 || $[74] !== t9) {
		t26 = /* @__PURE__ */ React.createElement("div", {
			className: classes.root,
			onClick: t9
		}, t23, t24, t25);
		$[71] = classes.root;
		$[72] = t23;
		$[73] = t25;
		$[74] = t9;
		$[75] = t26;
	} else t26 = $[75];
	let t27;
	if ($[76] !== children) {
		t27 = /* @__PURE__ */ React.createElement("div", null, children);
		$[76] = children;
		$[77] = t27;
	} else t27 = $[77];
	let t28;
	if ($[78] !== expandItem || $[79] !== t27) {
		t28 = /* @__PURE__ */ React.createElement(Collapse, {
			in: expandItem,
			timeout: "auto",
			unmountOnExit: true
		}, t27);
		$[78] = expandItem;
		$[79] = t27;
		$[80] = t28;
	} else t28 = $[80];
	let t29;
	if ($[81] !== t26 || $[82] !== t28) {
		t29 = /* @__PURE__ */ React.createElement("div", null, t26, t28);
		$[81] = t26;
		$[82] = t28;
		$[83] = t29;
	} else t29 = $[83];
	return t29;
};
//#endregion
export { FluentListItem };

//# sourceMappingURL=FluentListItem.mjs.map