import { c } from "react-compiler-runtime";
import React from "react";
import { Avatar, Box, Chip, lighten, makeStyles, useTheme } from "@material-ui/core";
import { PropTypes as PropTypes$1 } from "prop-types";
import { Skeleton } from "@material-ui/lab";
//#region src/UI/dataDisplay/status/StatusFlags.jsx
const useStyles = makeStyles((theme) => ({
	rootContainer: {
		alignItems: "flex-end",
		gap: "6px",
		flexWrap: "wrap",
		flexDirection: "row-reverse"
	},
	skeleton: {
		borderRadius: "5px",
		minWidth: "323px"
	}
}));
const AccountFlags = (props) => {
	const $ = c(31);
	const { isLoading, flagList } = props;
	const classes = useStyles(props);
	const theme = useTheme();
	const t0 = theme.palette.success.light;
	let t1;
	if ($[0] !== theme.palette.success.light) {
		t1 = lighten(theme.palette.success.light, .5);
		$[0] = theme.palette.success.light;
		$[1] = t1;
	} else t1 = $[1];
	let t2;
	if ($[2] !== t1 || $[3] !== theme.palette.success.light) {
		t2 = {
			textColor: t0,
			backgroundColor: t1
		};
		$[2] = t1;
		$[3] = theme.palette.success.light;
		$[4] = t2;
	} else t2 = $[4];
	const t3 = theme.palette.warning.light;
	let t4;
	if ($[5] !== theme.palette.warning.light) {
		t4 = lighten(theme.palette.warning.light, .5);
		$[5] = theme.palette.warning.light;
		$[6] = t4;
	} else t4 = $[6];
	let t5;
	if ($[7] !== t4 || $[8] !== theme.palette.warning.light) {
		t5 = {
			textColor: t3,
			backgroundColor: t4
		};
		$[7] = t4;
		$[8] = theme.palette.warning.light;
		$[9] = t5;
	} else t5 = $[9];
	const t6 = theme.palette.error.light;
	let t7;
	if ($[10] !== theme.palette.error.light) {
		t7 = lighten(theme.palette.error.light, .5);
		$[10] = theme.palette.error.light;
		$[11] = t7;
	} else t7 = $[11];
	let t8;
	if ($[12] !== t7 || $[13] !== theme.palette.error.light) {
		t8 = {
			textColor: t6,
			backgroundColor: t7
		};
		$[12] = t7;
		$[13] = theme.palette.error.light;
		$[14] = t8;
	} else t8 = $[14];
	const t9 = theme.palette.primary.light;
	let t10;
	if ($[15] !== theme.palette.primary.light) {
		t10 = lighten(theme.palette.primary.light, .5);
		$[15] = theme.palette.primary.light;
		$[16] = t10;
	} else t10 = $[16];
	let t11;
	if ($[17] !== t10 || $[18] !== theme.palette.primary.light) {
		t11 = {
			textColor: t9,
			backgroundColor: t10
		};
		$[17] = t10;
		$[18] = theme.palette.primary.light;
		$[19] = t11;
	} else t11 = $[19];
	let t12;
	if ($[20] !== t11 || $[21] !== t2 || $[22] !== t5 || $[23] !== t8) {
		t12 = {
			success: t2,
			warning: t5,
			alert: t8,
			info: t11
		};
		$[20] = t11;
		$[21] = t2;
		$[22] = t5;
		$[23] = t8;
		$[24] = t12;
	} else t12 = $[24];
	const SeverityRange = t12;
	let t13;
	if ($[25] !== SeverityRange || $[26] !== classes.rootContainer || $[27] !== classes.skeleton || $[28] !== flagList || $[29] !== isLoading) {
		t13 = /* @__PURE__ */ React.createElement("div", null, isLoading ? /* @__PURE__ */ React.createElement(Skeleton, {
			variant: "rect",
			width: "100%",
			height: "60px",
			className: classes.skeleton
		}) : /* @__PURE__ */ React.createElement(Box, {
			display: "flex",
			className: classes.rootContainer
		}, flagList && flagList.length > 0 && flagList.map((item, index) => {
			const { label: t14, severity: t15, textColor, backgroundColor, customColorRange } = item;
			const label = t14 === void 0 ? "Default" : t14;
			const severity = t15 === void 0 ? "info" : t15;
			const colorRange = customColorRange ?? SeverityRange;
			const background = backgroundColor || colorRange[severity]?.backgroundColor;
			const selectedTextColor = textColor || colorRange[severity]?.textColor;
			return /* @__PURE__ */ React.createElement(Chip, {
				label,
				avatar: /* @__PURE__ */ React.createElement(Avatar, { style: { backgroundColor: selectedTextColor } }, label[0]?.toUpperCase() || "F"),
				style: { backgroundColor: background }
			});
		})));
		$[25] = SeverityRange;
		$[26] = classes.rootContainer;
		$[27] = classes.skeleton;
		$[28] = flagList;
		$[29] = isLoading;
		$[30] = t13;
	} else t13 = $[30];
	return t13;
};
AccountFlags.propTypes = {
	isLoading: PropTypes$1.bool,
	flagList: PropTypes$1.array.isRequired,
	customColorRange: PropTypes$1.object
};
//#endregion
export { AccountFlags };

//# sourceMappingURL=StatusFlags.mjs.map