import { IconRenderer } from "../../templates/ui/renderers/IconRenderer.mjs";
import { AlertPill } from "./ui/AlertPill.mjs";
import { UdpAlertsContainer } from "../../utilityDisplay/alerts/UdpAlertsContainer.mjs";
import { EntityHeaderContainer } from "./ui/EntityHeaderContainer.mjs";
import { EntityHeaderList } from "./ui/EntityHeaderList.mjs";
import { EntityHeaderListItem } from "./ui/EntityHeaderListItem.mjs";
import { EntityHeaderStatList } from "./ui/EntityHeaderStatList.mjs";
import { EntityHeaderStatListItem } from "./ui/EntityHeaderStatListItem.mjs";
import { EntityHeaderSection } from "./ui/EntityHeaderSection.mjs";
import { useElementWidth } from "./functions/useElementWidth.mjs";
import { EntityHeaderFlags } from "./ui/EntityHeaderFlags.mjs";
import { c } from "react-compiler-runtime";
import React, { useEffect, useRef, useState } from "react";
import { makeStyles } from "@material-ui/core";
import "@fluentui/react-icons";
import PropTypes from "prop-types";
//#region src/UI/dataDisplay/entityHeader/EntityHeader.jsx
const useStyles = makeStyles((theme) => ({ root: {} }));
const EntityHeader = (props) => {
	const $ = c(62);
	const { sectionProps, background, color, kpiProps, hiddenSections, chips, alerts, useUdpAlerts } = props;
	const classes = useStyles(props);
	const { section1, section2, section3, section4 } = sectionProps;
	const { kpi1, kpi2, kpi3, kpi4 } = kpiProps;
	const componentRef = useRef();
	const [compactSize, setCompactSize] = useState(true);
	const { isBreakpointUp } = useElementWidth(componentRef);
	let t0;
	let t1;
	if ($[0] !== isBreakpointUp) {
		t0 = () => {
			if (isBreakpointUp("md")) setCompactSize(false);
			else setCompactSize(true);
		};
		t1 = [isBreakpointUp];
		$[0] = isBreakpointUp;
		$[1] = t0;
		$[2] = t1;
	} else {
		t0 = $[1];
		t1 = $[2];
	}
	useEffect(t0, t1);
	let t2;
	if ($[3] !== background || $[4] !== color || $[5] !== compactSize || $[6] !== section1 || $[7] !== section2 || $[8] !== section3 || $[9] !== section4) {
		t2 = !!compactSize && /* @__PURE__ */ React.createElement(EntityHeaderContainer, {
			direction: "row",
			showSeperator: true,
			background,
			color
		}, /* @__PURE__ */ React.createElement(EntityHeaderSection, { flexGrow: true }, /* @__PURE__ */ React.createElement(EntityHeaderList, null, !section1?.hidden && section1?.values?.length && section1.values?.map(_temp), !section2?.hidden && section2?.values?.length && section2.values?.map(_temp2), !section3?.hidden && section3?.values?.length && section3.values?.map(_temp3), !section4?.hidden && section4?.values?.length && section4.values?.map(_temp4))));
		$[3] = background;
		$[4] = color;
		$[5] = compactSize;
		$[6] = section1;
		$[7] = section2;
		$[8] = section3;
		$[9] = section4;
		$[10] = t2;
	} else t2 = $[10];
	let t3;
	if ($[11] !== compactSize || $[12] !== section1 || $[13] !== section2 || $[14] !== section3 || $[15] !== section4) {
		t3 = !compactSize && /* @__PURE__ */ React.createElement(React.Fragment, null, !section1?.hidden && /* @__PURE__ */ React.createElement(EntityHeaderSection, { flexGrow: true }, /* @__PURE__ */ React.createElement(EntityHeaderList, null, !!section1?.values?.length && section1.values.map(_temp5))), !section2?.hidden && /* @__PURE__ */ React.createElement(EntityHeaderSection, { flexGrow: true }, /* @__PURE__ */ React.createElement(EntityHeaderList, null, !!section2?.values?.length && section2.values.map(_temp6))), !section3?.hidden && /* @__PURE__ */ React.createElement(EntityHeaderSection, { flexGrow: true }, /* @__PURE__ */ React.createElement(EntityHeaderList, null, !!section3?.values?.length && section3.values.map(_temp7))), !section4?.hidden && /* @__PURE__ */ React.createElement(EntityHeaderSection, { flexGrow: true }, /* @__PURE__ */ React.createElement(EntityHeaderList, null, !!section4?.values?.length && section4.values.map(_temp8))));
		$[11] = compactSize;
		$[12] = section1;
		$[13] = section2;
		$[14] = section3;
		$[15] = section4;
		$[16] = t3;
	} else t3 = $[16];
	let t4;
	if ($[17] !== kpi1?.color || $[18] !== kpi1?.hidden || $[19] !== kpi1?.icon || $[20] !== kpi1?.label || $[21] !== kpi1?.labelColor || $[22] !== kpi1?.value || $[23] !== kpi2?.color || $[24] !== kpi2?.hidden || $[25] !== kpi2?.icon || $[26] !== kpi2?.label || $[27] !== kpi2?.labelColor || $[28] !== kpi2?.value || $[29] !== kpi3?.color || $[30] !== kpi3?.hidden || $[31] !== kpi3?.icon || $[32] !== kpi3?.label || $[33] !== kpi3?.labelColor || $[34] !== kpi3?.value || $[35] !== kpi4?.color || $[36] !== kpi4?.hidden || $[37] !== kpi4?.icon || $[38] !== kpi4?.label || $[39] !== kpi4?.labelColor || $[40] !== kpi4?.value || $[41] !== kpiProps.hidden) {
		t4 = !kpiProps.hidden && /* @__PURE__ */ React.createElement(EntityHeaderSection, { flexGrow: true }, /* @__PURE__ */ React.createElement(EntityHeaderStatList, { flexGrow: true }, !kpi1?.hidden && /* @__PURE__ */ React.createElement(EntityHeaderStatListItem, {
			value: kpi1?.value,
			label: kpi1?.label,
			labelColor: kpi1?.labelColor,
			flexGrow: true,
			icon: /* @__PURE__ */ React.createElement(IconRenderer, {
				noBorder: true,
				removeContainer: true,
				value: {
					color: { hex: "#" + kpi1?.color },
					name: kpi1?.icon || "ChartIcon"
				}
			})
		}), !kpi2?.hidden && /* @__PURE__ */ React.createElement(EntityHeaderStatListItem, {
			value: kpi2?.value,
			label: kpi2?.label,
			labelColor: kpi2?.labelColor,
			flexGrow: true,
			icon: /* @__PURE__ */ React.createElement(IconRenderer, {
				noBorder: true,
				removeContainer: true,
				value: {
					color: { hex: "#" + kpi2?.color },
					name: kpi2?.icon || "ChartIcon"
				}
			})
		}), !kpi3?.hidden && /* @__PURE__ */ React.createElement(EntityHeaderStatListItem, {
			value: kpi3?.value,
			label: kpi3?.label,
			labelColor: kpi3?.labelColor,
			flexGrow: true,
			icon: /* @__PURE__ */ React.createElement(IconRenderer, {
				noBorder: true,
				removeContainer: true,
				value: {
					color: { hex: "#" + kpi3?.color },
					name: kpi3?.icon || "ChartIcon"
				}
			})
		}), !kpi4?.hidden && /* @__PURE__ */ React.createElement(EntityHeaderStatListItem, {
			value: kpi4?.value,
			label: kpi4?.label,
			labelColor: kpi4?.labelColor,
			flexGrow: true,
			icon: /* @__PURE__ */ React.createElement(IconRenderer, {
				noBorder: true,
				removeContainer: true,
				value: {
					color: { hex: "#" + kpi4?.color },
					name: kpi4?.icon || "ChartIcon"
				}
			})
		})));
		$[17] = kpi1?.color;
		$[18] = kpi1?.hidden;
		$[19] = kpi1?.icon;
		$[20] = kpi1?.label;
		$[21] = kpi1?.labelColor;
		$[22] = kpi1?.value;
		$[23] = kpi2?.color;
		$[24] = kpi2?.hidden;
		$[25] = kpi2?.icon;
		$[26] = kpi2?.label;
		$[27] = kpi2?.labelColor;
		$[28] = kpi2?.value;
		$[29] = kpi3?.color;
		$[30] = kpi3?.hidden;
		$[31] = kpi3?.icon;
		$[32] = kpi3?.label;
		$[33] = kpi3?.labelColor;
		$[34] = kpi3?.value;
		$[35] = kpi4?.color;
		$[36] = kpi4?.hidden;
		$[37] = kpi4?.icon;
		$[38] = kpi4?.label;
		$[39] = kpi4?.labelColor;
		$[40] = kpi4?.value;
		$[41] = kpiProps.hidden;
		$[42] = t4;
	} else t4 = $[42];
	let t5;
	if ($[43] !== background || $[44] !== color || $[45] !== t3 || $[46] !== t4) {
		t5 = /* @__PURE__ */ React.createElement(EntityHeaderContainer, {
			direction: "row",
			showSeperator: true,
			background,
			color
		}, t3, t4);
		$[43] = background;
		$[44] = color;
		$[45] = t3;
		$[46] = t4;
		$[47] = t5;
	} else t5 = $[47];
	let t6;
	if ($[48] !== alerts?.error || $[49] !== alerts?.warning || $[50] !== background || $[51] !== chips || $[52] !== classes || $[53] !== color || $[54] !== hiddenSections.alert || $[55] !== hiddenSections.chips || $[56] !== useUdpAlerts) {
		t6 = (!hiddenSections.chips || !hiddenSections.alert) && /* @__PURE__ */ React.createElement(EntityHeaderContainer, {
			className: classes.root,
			background,
			color
		}, !hiddenSections.chips && /* @__PURE__ */ React.createElement(EntityHeaderSection, {
			flexGrow: true,
			alignItems: "center"
		}, /* @__PURE__ */ React.createElement(EntityHeaderFlags, { data: chips?.map(_temp9) })), /* @__PURE__ */ React.createElement(EntityHeaderSection, { flexGrow: true }), !hiddenSections.alert && /* @__PURE__ */ React.createElement(EntityHeaderSection, null, useUdpAlerts ? /* @__PURE__ */ React.createElement(UdpAlertsContainer, null) : /* @__PURE__ */ React.createElement(AlertPill, {
			errorCount: alerts?.error,
			warningCount: alerts?.warning
		})));
		$[48] = alerts?.error;
		$[49] = alerts?.warning;
		$[50] = background;
		$[51] = chips;
		$[52] = classes;
		$[53] = color;
		$[54] = hiddenSections.alert;
		$[55] = hiddenSections.chips;
		$[56] = useUdpAlerts;
		$[57] = t6;
	} else t6 = $[57];
	let t7;
	if ($[58] !== t2 || $[59] !== t5 || $[60] !== t6) {
		t7 = /* @__PURE__ */ React.createElement("div", { ref: componentRef }, t2, t5, t6);
		$[58] = t2;
		$[59] = t5;
		$[60] = t6;
		$[61] = t7;
	} else t7 = $[61];
	return t7;
};
EntityHeader.propTypes = {
	sectionProps: PropTypes.shape({
		section1: PropTypes.shape({
			hidden: PropTypes.bool,
			values: PropTypes.arrayOf(PropTypes.shape({
				label: PropTypes.string,
				value: PropTypes.string
			}))
		}),
		section2: PropTypes.shape({
			hidden: PropTypes.bool,
			values: PropTypes.arrayOf(PropTypes.shape({
				label: PropTypes.string,
				value: PropTypes.string
			}))
		}),
		section3: PropTypes.shape({
			hidden: PropTypes.bool,
			values: PropTypes.arrayOf(PropTypes.shape({
				label: PropTypes.string,
				value: PropTypes.string
			}))
		})
	}).isRequired,
	background: PropTypes.string,
	color: PropTypes.string,
	kpiProps: PropTypes.shape({
		hidden: PropTypes.bool,
		kpi1: PropTypes.shape({
			label: PropTypes.string,
			value: PropTypes.string,
			color: PropTypes.string,
			icon: PropTypes.string,
			hidden: PropTypes.bool
		}),
		kpi2: PropTypes.shape({
			label: PropTypes.string,
			value: PropTypes.string,
			color: PropTypes.string,
			icon: PropTypes.string,
			hidden: PropTypes.bool
		}),
		kpi3: PropTypes.shape({
			label: PropTypes.string,
			value: PropTypes.string,
			color: PropTypes.string,
			icon: PropTypes.string,
			hidden: PropTypes.bool
		}),
		kpi4: PropTypes.shape({
			label: PropTypes.string,
			value: PropTypes.string,
			color: PropTypes.string,
			icon: PropTypes.string,
			hidden: PropTypes.bool
		})
	}).isRequired,
	hiddenSections: PropTypes.shape({
		alert: PropTypes.bool,
		chips: PropTypes.bool
	}),
	chips: PropTypes.arrayOf(PropTypes.string),
	alerts: PropTypes.shape({
		warning: PropTypes.number,
		error: PropTypes.number
	})
};
function _temp(item) {
	return /* @__PURE__ */ React.createElement(EntityHeaderListItem, {
		label: item?.label,
		value: item?.value,
		link: item?.link
	});
}
function _temp2(item_0) {
	return /* @__PURE__ */ React.createElement(EntityHeaderListItem, {
		label: item_0?.label,
		value: item_0?.value,
		link: item_0?.link
	});
}
function _temp3(item_1) {
	return /* @__PURE__ */ React.createElement(EntityHeaderListItem, {
		label: item_1?.label,
		value: item_1?.value,
		link: item_1?.link
	});
}
function _temp4(item_2) {
	return /* @__PURE__ */ React.createElement(EntityHeaderListItem, {
		label: item_2?.label,
		value: item_2?.value,
		link: item_2?.link
	});
}
function _temp5(item_3) {
	return /* @__PURE__ */ React.createElement(EntityHeaderListItem, {
		label: item_3?.label,
		value: item_3?.value,
		link: item_3?.link
	});
}
function _temp6(item_4) {
	return /* @__PURE__ */ React.createElement(EntityHeaderListItem, {
		label: item_4?.label,
		value: item_4?.value,
		link: item_4?.link
	});
}
function _temp7(item_5) {
	return /* @__PURE__ */ React.createElement(EntityHeaderListItem, {
		label: item_5?.label,
		value: item_5?.value,
		link: item_5?.link
	});
}
function _temp8(item_6) {
	return /* @__PURE__ */ React.createElement(EntityHeaderListItem, {
		label: item_6?.label,
		value: item_6?.value,
		link: item_6?.link
	});
}
function _temp9(chip) {
	return { label: chip };
}
//#endregion
export { EntityHeader };

//# sourceMappingURL=EntityHeader.mjs.map