import { FluentIcon } from "../../../../utilities/iconLibrary/FluentIcon.mjs";
import { ChipAlphabet } from "../../ChipAlphabet.mjs";
import { c } from "react-compiler-runtime";
import React from "react";
import { makeStyles } from "@material-ui/core";
import { FlagIcon } from "@fluentui/react-icons";
//#region src/UI/dataDisplay/entityHeader/ui/EntityHeaderFlags.jsx
const useStyles = makeStyles((theme) => ({
	flagIcon: { marginRight: theme.spacing(2) },
	chipContainer: {
		marginBottom: theme.spacing(-1),
		"& > *": {
			marginRight: theme.spacing(1),
			marginBottom: theme.spacing(1)
		}
	}
}));
function flagLetter(str) {
	return str.charAt(0).toUpperCase();
}
const EntityHeaderFlags = (t0) => {
	const $ = c(12);
	const { data: t1, color: t2 } = t0;
	let t3;
	if ($[0] !== t1) {
		t3 = t1 === void 0 ? [] : t1;
		$[0] = t1;
		$[1] = t3;
	} else t3 = $[1];
	const data = t3;
	const classes = useStyles();
	if (!data && data.length === 0) return;
	let t4;
	if ($[2] !== classes.flagIcon) {
		t4 = /* @__PURE__ */ React.createElement(FluentIcon, {
			size: "small",
			component: FlagIcon,
			className: classes.flagIcon
		});
		$[2] = classes.flagIcon;
		$[3] = t4;
	} else t4 = $[3];
	const t5 = classes.chipContainer;
	let t6;
	if ($[4] !== data) {
		t6 = data.map(_temp);
		$[4] = data;
		$[5] = t6;
	} else t6 = $[5];
	let t7;
	if ($[6] !== classes.chipContainer || $[7] !== t6) {
		t7 = /* @__PURE__ */ React.createElement("div", { className: t5 }, t6);
		$[6] = classes.chipContainer;
		$[7] = t6;
		$[8] = t7;
	} else t7 = $[8];
	let t8;
	if ($[9] !== t4 || $[10] !== t7) {
		t8 = /* @__PURE__ */ React.createElement(React.Fragment, null, t4, t7);
		$[9] = t4;
		$[10] = t7;
		$[11] = t8;
	} else t8 = $[11];
	return t8;
};
function _temp(item) {
	return /* @__PURE__ */ React.createElement(ChipAlphabet, {
		avatar: true,
		avatarCharacter: flagLetter(item.label),
		label: item.label,
		handleClick: () => item.handleClick
	});
}
//#endregion
export { EntityHeaderFlags };

//# sourceMappingURL=EntityHeaderFlags.mjs.map