import { FluentIcon } from "../../utilities/iconLibrary/FluentIcon.mjs";
import { LayoutUnit } from "../../layout/LayoutUnit.mjs";
import { StatusChip } from "./status/StatusChip.mjs";
import { EmptyStateDisplay } from "./EmptyStateDisplay.mjs";
import { c } from "react-compiler-runtime";
import React from "react";
import { Avatar, Box, Divider, List, ListItem, ListItemAvatar, ListItemIcon, ListItemText, Typography, makeStyles, useTheme } from "@material-ui/core";
import clsx from "clsx";
import { ErrorIcon } from "@fluentui/react-icons";
import PropTypes from "prop-types";
//#region src/UI/dataDisplay/AmbientList.jsx
const useStyles = makeStyles((theme) => ({
	avatar: {
		backgroundColor: theme.palette.secondary.light,
		color: theme.palette.getContrastText(theme.palette.secondary.light)
	},
	denseAvatar: {
		width: theme.spacing(3.75),
		height: theme.spacing(3.75),
		margin: "4px 0px"
	},
	list: {
		width: "100%",
		backgroundColor: theme.palette.background.paper,
		padding: "0px",
		maxHeight: (props) => props?.maxHeight || 343,
		overflow: "auto",
		height: (props) => props?.listHeight
	},
	listItem: { padding: "0px 15px" },
	status: { marginLeft: theme.spacing(1) },
	noDataMessage: {
		height: (props) => props?.noDataHeight,
		display: "flex",
		flexDirection: "column",
		alignItems: "center",
		justifyContent: "center",
		gap: "10px"
	}
}));
const DefaultFieldConfig = {
	primaryText: "primaryText",
	secondaryText: "secondaryText"
};
const AmbientList = (props) => {
	const $ = c(20);
	const theme = useTheme();
	const classes = useStyles(props);
	const { data, useAvatar: t0, getItemIcon: t1, getItemStatus: t2, onItemClick: t3, fieldConfig: t4, noDataMessage: t5 } = props;
	const useAvatar = t0 === void 0 ? true : t0;
	const getItemIcon = t1 === void 0 ? _temp : t1;
	const getItemStatus = t2 === void 0 ? _temp2 : t2;
	const onItemClick = t3 === void 0 ? _temp3 : t3;
	const fieldConfig = t4 === void 0 ? DefaultFieldConfig : t4;
	const noDataMessage = t5 === void 0 ? "No data available" : t5;
	if (!data || data.length === 0) {
		let t6;
		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
			t6 = /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" });
			$[0] = t6;
		} else t6 = $[0];
		let t7;
		if ($[1] !== noDataMessage) {
			t7 = /* @__PURE__ */ React.createElement(EmptyStateDisplay, {
				icon: ErrorIcon,
				primaryText: noDataMessage
			});
			$[1] = noDataMessage;
			$[2] = t7;
		} else t7 = $[2];
		let t8;
		if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
			t8 = /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" });
			$[3] = t8;
		} else t8 = $[3];
		let t9;
		if ($[4] !== t7) {
			t9 = /* @__PURE__ */ React.createElement(React.Fragment, null, t6, t7, t8);
			$[4] = t7;
			$[5] = t9;
		} else t9 = $[5];
		return t9;
	}
	const t6 = classes?.list;
	let t7;
	if ($[6] !== classes || $[7] !== data || $[8] !== fieldConfig?.primaryText || $[9] !== fieldConfig?.secondaryText || $[10] !== fieldConfig?.subText || $[11] !== getItemIcon || $[12] !== getItemStatus || $[13] !== onItemClick || $[14] !== theme || $[15] !== useAvatar) {
		t7 = data?.map((item, index) => {
			const status = getItemStatus(item);
			const icon = getItemIcon(item);
			return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ListItem, {
				button: true,
				className: classes.listItem,
				onClick: () => onItemClick(item)
			}, useAvatar && icon ? /* @__PURE__ */ React.createElement(ListItemAvatar, null, /* @__PURE__ */ React.createElement(Avatar, {
				className: clsx(classes.avatar, { [classes.denseAvatar]: !item?.[fieldConfig?.primaryText] || !item?.[fieldConfig?.secondaryText] }),
				sizes: "large"
			}, /* @__PURE__ */ React.createElement(FluentIcon, {
				component: icon,
				size: "small"
			}))) : /* @__PURE__ */ React.createElement("div", null, icon && /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(FluentIcon, {
				component: icon,
				size: !item?.[fieldConfig?.primaryText] || !item?.[fieldConfig?.secondaryText] ? "medium" : "large",
				color: theme.palette.secondary.main
			}))), /* @__PURE__ */ React.createElement(ListItemText, {
				primary: item?.[fieldConfig?.primaryText],
				secondary: item?.[fieldConfig?.secondaryText],
				primaryTypographyProps: {
					variant: "body2",
					color: "textPrimary"
				},
				secondaryTypographyProps: {
					variant: "body1",
					color: "textSecondary"
				}
			}), /* @__PURE__ */ React.createElement(ListItemText, { disableTypography: true }, /* @__PURE__ */ React.createElement(Typography, { align: "right" }, item?.[fieldConfig?.subText])), status?.label && /* @__PURE__ */ React.createElement(Box, {
				display: "flex",
				flexDirection: "column",
				justifyContent: "center",
				alignItems: "flex-end",
				className: classes.status
			}, /* @__PURE__ */ React.createElement(StatusChip, {
				status: status?.status ?? "info",
				label: status?.label
			}))), /* @__PURE__ */ React.createElement(Divider, null));
		});
		$[6] = classes;
		$[7] = data;
		$[8] = fieldConfig?.primaryText;
		$[9] = fieldConfig?.secondaryText;
		$[10] = fieldConfig?.subText;
		$[11] = getItemIcon;
		$[12] = getItemStatus;
		$[13] = onItemClick;
		$[14] = theme;
		$[15] = useAvatar;
		$[16] = t7;
	} else t7 = $[16];
	let t8;
	if ($[17] !== t6 || $[18] !== t7) {
		t8 = /* @__PURE__ */ React.createElement(List, { className: t6 }, t7);
		$[17] = t6;
		$[18] = t7;
		$[19] = t8;
	} else t8 = $[19];
	return t8;
};
AmbientList.propTypes = {
	data: PropTypes.arrayOf(PropTypes.object),
	useAvatar: PropTypes.bool,
	getItemIcon: PropTypes.func,
	getItemStatus: PropTypes.func,
	onItemClick: PropTypes.func,
	fieldConfig: PropTypes.shape({
		primaryText: PropTypes.string,
		secondaryText: PropTypes.string,
		subText: PropTypes.string
	}),
	noDataMessage: PropTypes.string,
	maxHeight: PropTypes.number,
	listHeight: PropTypes.string,
	noDataHeight: PropTypes.string
};
function _temp() {}
function _temp2() {}
function _temp3() {}
//#endregion
export { AmbientList };

//# sourceMappingURL=AmbientList.mjs.map