import { FluentButton } from "../../../inputs/buttons/FluentButton.mjs";
import { FluentIconButton } from "../../../inputs/buttons/FluentIconButton.mjs";
import { getEllipseColor } from "../../../../utilities/style/colorConverter.mjs";
import { LayoutUnit } from "../../../../layout/LayoutUnit.mjs";
import { StatusChip } from "../../../dataDisplay/status/StatusChip.mjs";
import { AmbientCardButton } from "../../../inputs/buttons/AmbientCardButton.mjs";
import { Adornment } from "../../../components/feedback/Adornment.mjs";
import { c } from "react-compiler-runtime";
import React, { useState } from "react";
import { CardContent, CardMedia, Collapse, Paper, Typography, lighten, makeStyles } from "@material-ui/core";
import { ChevronDownIcon, ChevronUpIcon } from "@fluentui/react-icons";
//#region src/UI/surfaces/cards/AmbientCard/AmbientCard.jsx
const useStyles = makeStyles((theme) => ({
	root: {},
	paper: {
		width: "100%",
		position: "relative",
		display: "flex",
		flexDirection: "column",
		height: (props) => props?.cardHeight ?? ""
	},
	adornment: {
		top: 0,
		left: 0,
		height: "100%",
		position: "absolute"
	},
	launchButtons: {
		padding: theme.spacing(0, 2, 2, 2),
		display: "flex",
		justifyContent: "flex-end",
		bottom: (props) => props.adjustBaseline ? props.adjustBaseline : 16,
		right: theme.spacing(2),
		gridGap: theme.spacing(1)
	},
	moreButton: {
		marginTop: theme.spacing(1),
		display: "flex",
		justifyContent: "center",
		backgroundColor: lighten(theme.palette.secondary.main, .9),
		padding: theme.spacing(1)
	},
	styleWidth: {
		width: (props) => !props?.fullWidth ? "75%" : "100%",
		height: "100%"
	},
	media: { height: (props) => props.mediaHeight || 120 },
	cardContent: {
		flexGrow: 1,
		padding: (props) => props.removePadding && 0,
		"&:last-child": { paddingBottom: (props) => props.lastChildBottomPadding ? props.lastChildBottomPadding : theme.spacing(2) },
		paddingTop: 0,
		height: (props) => props.cardContentHeight ? props.cardContentHeight : ""
	},
	titleWrapper: {
		display: "flex",
		backgroundColor: (props) => props.headerColor && getEllipseColor(theme, props.headerColor, "light")
	},
	title: { color: (props) => props.headerColor && theme.palette.getContrastText(getEllipseColor(theme, props.headerColor, "light")) },
	loading: {
		position: "absolute",
		top: 0,
		left: 0
	},
	expandMessage: { display: "flex" },
	cardRoot: { "&:last-child": { paddingBottom: (props) => props.lastChildBottomPadding ? props.lastChildBottomPadding : theme.spacing(2) } },
	visualization: {
		display: "flex",
		alignItems: "flex-end",
		width: "100%",
		height: 300
	},
	titlesWrapper: {
		display: "flex",
		flexDirection: "column",
		flex: 1,
		lineHeight: (props) => props.globalExpanded && "125%"
	},
	collapseChildren: {
		flexGrow: 1,
		"& .MuiCollapse-wrapper": { height: "100%" },
		"& .MuiCollapse-wrapperInner": { height: "100%" },
		height: (props) => props.cardContentHeight ? props.cardContentHeight : ""
	}
}));
const AmbientCard = (props) => {
	const $ = c(104);
	const classes = useStyles(props);
	const [expanded, setExpanded] = useState(false);
	let ariaLabel;
	let baseLoading;
	let children;
	let collapseChildrenWhenExpanded;
	let deleteEvent;
	let deleteOption;
	let editEvent;
	let editOption;
	let extendedList;
	let globalToggle;
	let header;
	let image;
	let imageTitle;
	let label;
	let large;
	let launchEvent;
	let launchOption;
	let more;
	let moreButton;
	let moreButtonExpanded;
	let moreMessage;
	let otherProps;
	let overrideStatusError;
	let overrideStatusInfo;
	let overrideStatusSuccess;
	let overrideStatusWarning;
	let removeTopLayoutUnit;
	let status;
	let subCard;
	let subtitle;
	let t0;
	let t1;
	let t2;
	let t3;
	let title;
	let visualization;
	if ($[0] !== props) {
		const { adornment: t4, ariaLabel: t5, baseLoading: t6, cardHeight, children: t7, collapseChildrenWhenExpanded: t8, customAdornment: t9, deleteEvent: t10, deleteOption: t11, editEvent: t12, editOption: t13, extendedContent, extendedList: t14, fullWidth, globalToggle: t15, header: t16, image: t17, imageTitle: t18, label: t19, large: t20, launchEvent: t21, launchOption: t22, loading, mediaHeight, more: t23, moreMessage: t24, moreButton: t25, moreButtonExpanded: t26, noAdornment: t27, overrideStatusSuccess: t28, overrideStatusError: t29, overrideStatusWarning: t30, overrideStatusInfo: t31, removeTopLayoutUnit: t32, status: t33, subCard: t34, title: t35, toggleGlobalExpanded: t36, visualization: t37, subtitle: t38, ...t39 } = props;
		t0 = t4;
		ariaLabel = t5;
		baseLoading = t6;
		children = t7;
		collapseChildrenWhenExpanded = t8;
		t1 = t9;
		deleteEvent = t10;
		deleteOption = t11;
		editEvent = t12;
		editOption = t13;
		extendedList = t14;
		globalToggle = t15;
		header = t16;
		image = t17;
		imageTitle = t18;
		label = t19;
		large = t20;
		launchEvent = t21;
		launchOption = t22;
		more = t23;
		moreMessage = t24;
		moreButton = t25;
		moreButtonExpanded = t26;
		t2 = t27;
		overrideStatusSuccess = t28;
		overrideStatusError = t29;
		overrideStatusWarning = t30;
		overrideStatusInfo = t31;
		removeTopLayoutUnit = t32;
		status = t33;
		subCard = t34;
		title = t35;
		t3 = t36;
		visualization = t37;
		subtitle = t38;
		otherProps = t39;
		$[0] = props;
		$[1] = ariaLabel;
		$[2] = baseLoading;
		$[3] = children;
		$[4] = collapseChildrenWhenExpanded;
		$[5] = deleteEvent;
		$[6] = deleteOption;
		$[7] = editEvent;
		$[8] = editOption;
		$[9] = extendedList;
		$[10] = globalToggle;
		$[11] = header;
		$[12] = image;
		$[13] = imageTitle;
		$[14] = label;
		$[15] = large;
		$[16] = launchEvent;
		$[17] = launchOption;
		$[18] = more;
		$[19] = moreButton;
		$[20] = moreButtonExpanded;
		$[21] = moreMessage;
		$[22] = otherProps;
		$[23] = overrideStatusError;
		$[24] = overrideStatusInfo;
		$[25] = overrideStatusSuccess;
		$[26] = overrideStatusWarning;
		$[27] = removeTopLayoutUnit;
		$[28] = status;
		$[29] = subCard;
		$[30] = subtitle;
		$[31] = t0;
		$[32] = t1;
		$[33] = t2;
		$[34] = t3;
		$[35] = title;
		$[36] = visualization;
	} else {
		ariaLabel = $[1];
		baseLoading = $[2];
		children = $[3];
		collapseChildrenWhenExpanded = $[4];
		deleteEvent = $[5];
		deleteOption = $[6];
		editEvent = $[7];
		editOption = $[8];
		extendedList = $[9];
		globalToggle = $[10];
		header = $[11];
		image = $[12];
		imageTitle = $[13];
		label = $[14];
		large = $[15];
		launchEvent = $[16];
		launchOption = $[17];
		more = $[18];
		moreButton = $[19];
		moreButtonExpanded = $[20];
		moreMessage = $[21];
		otherProps = $[22];
		overrideStatusError = $[23];
		overrideStatusInfo = $[24];
		overrideStatusSuccess = $[25];
		overrideStatusWarning = $[26];
		removeTopLayoutUnit = $[27];
		status = $[28];
		subCard = $[29];
		subtitle = $[30];
		t0 = $[31];
		t1 = $[32];
		t2 = $[33];
		t3 = $[34];
		title = $[35];
		visualization = $[36];
	}
	const adornment = t0 === void 0 ? "secondary" : t0;
	const customAdornment = t1 === void 0 ? " " : t1;
	const noAdornment = t2 === void 0 ? false : t2;
	const [globalExpanded, setGlobalExpanded] = useState(t3 === void 0 ? true : t3);
	if (baseLoading) return null;
	let t4;
	if ($[37] !== adornment || $[38] !== classes.adornment || $[39] !== customAdornment || $[40] !== noAdornment) {
		t4 = !noAdornment && /* @__PURE__ */ React.createElement("div", { className: classes.adornment }, customAdornment ? customAdornment : /* @__PURE__ */ React.createElement(Adornment, { color: adornment }));
		$[37] = adornment;
		$[38] = classes.adornment;
		$[39] = customAdornment;
		$[40] = noAdornment;
		$[41] = t4;
	} else t4 = $[41];
	let t5;
	if ($[42] !== classes.cardRoot || $[43] !== classes.icon || $[44] !== classes.title || $[45] !== classes.titleWrapper || $[46] !== classes.titlesWrapper || $[47] !== globalExpanded || $[48] !== globalToggle || $[49] !== label || $[50] !== overrideStatusError || $[51] !== overrideStatusInfo || $[52] !== overrideStatusSuccess || $[53] !== overrideStatusWarning || $[54] !== status || $[55] !== subCard || $[56] !== subtitle || $[57] !== title) {
		t5 = title && /* @__PURE__ */ React.createElement(CardContent, {
			className: classes.titleWrapper,
			classes: { root: classes.cardRoot }
		}, /* @__PURE__ */ React.createElement("div", { className: classes.titlesWrapper }, /* @__PURE__ */ React.createElement(Typography, {
			className: classes.title,
			component: "h2",
			variant: subCard ? "subtitle2" : "h6"
		}, title), subtitle && /* @__PURE__ */ React.createElement(Typography, {
			variant: "body1",
			className: classes.title
		}, subtitle)), status && /* @__PURE__ */ React.createElement(StatusChip, {
			status,
			label,
			success: overrideStatusSuccess,
			error: overrideStatusError,
			warning: overrideStatusWarning,
			info: overrideStatusInfo
		}), globalToggle && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
			onClick: () => setGlobalExpanded(!globalExpanded),
			icon: globalExpanded ? ChevronUpIcon : ChevronDownIcon,
			className: classes.icon,
			id: "udpRecord-AmbientCard-Toggle-" + (globalExpanded ? "Up" : "Down"),
			udprecordid: "udpRecord-AmbientCard-Toggle-" + (globalExpanded ? "Up" : "Down")
		})));
		$[42] = classes.cardRoot;
		$[43] = classes.icon;
		$[44] = classes.title;
		$[45] = classes.titleWrapper;
		$[46] = classes.titlesWrapper;
		$[47] = globalExpanded;
		$[48] = globalToggle;
		$[49] = label;
		$[50] = overrideStatusError;
		$[51] = overrideStatusInfo;
		$[52] = overrideStatusSuccess;
		$[53] = overrideStatusWarning;
		$[54] = status;
		$[55] = subCard;
		$[56] = subtitle;
		$[57] = title;
		$[58] = t5;
	} else t5 = $[58];
	let t6;
	if ($[59] !== classes.media || $[60] !== image || $[61] !== imageTitle) {
		t6 = image && /* @__PURE__ */ React.createElement(CardMedia, {
			className: classes.media,
			image,
			title: imageTitle
		});
		$[59] = classes.media;
		$[60] = image;
		$[61] = imageTitle;
		$[62] = t6;
	} else t6 = $[62];
	let t7;
	if ($[63] !== children || $[64] !== classes.cardContent || $[65] !== classes.collapseChildren || $[66] !== classes.expandMessage || $[67] !== classes.moreButton || $[68] !== classes.styleWidth || $[69] !== collapseChildrenWhenExpanded || $[70] !== expanded || $[71] !== extendedList || $[72] !== globalExpanded || $[73] !== header || $[74] !== image || $[75] !== large || $[76] !== more || $[77] !== moreButton || $[78] !== moreButtonExpanded || $[79] !== moreMessage || $[80] !== removeTopLayoutUnit) {
		t7 = globalExpanded && /* @__PURE__ */ React.createElement(CardContent, { classes: { root: classes.cardContent } }, !image && !header && !removeTopLayoutUnit && /* @__PURE__ */ React.createElement(LayoutUnit, { unit: large ? "md" : "xxs" }), image && /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xs" }), /* @__PURE__ */ React.createElement(Collapse, {
			in: !collapseChildrenWhenExpanded || !expanded,
			timeout: "auto",
			className: classes.collapseChildren
		}, /* @__PURE__ */ React.createElement("div", { className: classes.styleWidth }, children)), extendedList && /* @__PURE__ */ React.createElement(Collapse, {
			in: expanded,
			timeout: "auto"
		}, /* @__PURE__ */ React.createElement("div", null, extendedList)), more && /* @__PURE__ */ React.createElement("div", { className: classes.moreButton }, /* @__PURE__ */ React.createElement("div", { className: classes.expandMessage }, /* @__PURE__ */ React.createElement(Typography, {
			style: {
				marginTop: 4,
				marginRight: 16
			},
			variant: "subtitle2"
		}, !expanded && moreMessage), /* @__PURE__ */ React.createElement(FluentButton, {
			onClick: () => setExpanded(!expanded),
			color: "secondary",
			variant: "outlined"
		}, expanded ? moreButtonExpanded : moreButton))));
		$[63] = children;
		$[64] = classes.cardContent;
		$[65] = classes.collapseChildren;
		$[66] = classes.expandMessage;
		$[67] = classes.moreButton;
		$[68] = classes.styleWidth;
		$[69] = collapseChildrenWhenExpanded;
		$[70] = expanded;
		$[71] = extendedList;
		$[72] = globalExpanded;
		$[73] = header;
		$[74] = image;
		$[75] = large;
		$[76] = more;
		$[77] = moreButton;
		$[78] = moreButtonExpanded;
		$[79] = moreMessage;
		$[80] = removeTopLayoutUnit;
		$[81] = t7;
	} else t7 = $[81];
	let t8;
	if ($[82] !== classes.visualization || $[83] !== visualization) {
		t8 = visualization && /* @__PURE__ */ React.createElement("div", { className: classes.visualization }, visualization);
		$[82] = classes.visualization;
		$[83] = visualization;
		$[84] = t8;
	} else t8 = $[84];
	let t9;
	if ($[85] !== ariaLabel || $[86] !== classes.launchButtons || $[87] !== deleteEvent || $[88] !== deleteOption || $[89] !== editEvent || $[90] !== editOption || $[91] !== globalToggle || $[92] !== launchEvent || $[93] !== launchOption || $[94] !== otherProps) {
		t9 = !globalToggle && (editOption || launchOption || deleteOption) && /* @__PURE__ */ React.createElement("div", { className: classes.launchButtons }, editOption && /* @__PURE__ */ React.createElement(AmbientCardButton, {
			"aria-label": ariaLabel,
			editOption: true,
			...otherProps,
			onClick: editEvent,
			id: "udpRecord-AmbientCard-edit",
			udprecordid: "udpRecord-AmbientCard-edit"
		}), launchOption && /* @__PURE__ */ React.createElement(AmbientCardButton, {
			"aria-label": ariaLabel,
			launchOption: true,
			...otherProps,
			onClick: launchEvent,
			id: "udpRecord-AmbientCard-launch",
			udprecordid: "udpRecord-AmbientCard-launch"
		}), deleteOption && /* @__PURE__ */ React.createElement(AmbientCardButton, {
			"aria-label": ariaLabel,
			deleteOption: true,
			...otherProps,
			onClick: deleteEvent,
			id: "udpRecord-AmbientCard-delete",
			udprecordid: "udpRecord-AmbientCard-delete"
		}));
		$[85] = ariaLabel;
		$[86] = classes.launchButtons;
		$[87] = deleteEvent;
		$[88] = deleteOption;
		$[89] = editEvent;
		$[90] = editOption;
		$[91] = globalToggle;
		$[92] = launchEvent;
		$[93] = launchOption;
		$[94] = otherProps;
		$[95] = t9;
	} else t9 = $[95];
	let t10;
	if ($[96] !== classes.paper || $[97] !== t4 || $[98] !== t5 || $[99] !== t6 || $[100] !== t7 || $[101] !== t8 || $[102] !== t9) {
		t10 = /* @__PURE__ */ React.createElement(Paper, {
			elevation: 0,
			className: classes.paper
		}, t4, t5, t6, t7, t8, t9);
		$[96] = classes.paper;
		$[97] = t4;
		$[98] = t5;
		$[99] = t6;
		$[100] = t7;
		$[101] = t8;
		$[102] = t9;
		$[103] = t10;
	} else t10 = $[103];
	return t10;
};
//#endregion
export { AmbientCard };

//# sourceMappingURL=AmbientCard.mjs.map