import { DynamicContainerWithMenu } from "../containers/DynamicContainerWithMenu.mjs";
import { c } from "react-compiler-runtime";
import React, { useRef, useState } from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import Chip from "@material-ui/core/Chip";
import Divider from "@material-ui/core/Divider";
import Tooltip from "@material-ui/core/Tooltip";
import Typography from "@material-ui/core/Typography";
import StarIcon from "@material-ui/icons/esm/Star";
//#region src/UI/utilityDisplay/ChipSection.jsx
const useStyles = makeStyles((theme) => ({
	wrapper: {
		display: "flex",
		gap: theme.spacing(1),
		flexWrap: "noWrap",
		backgroundColor: `${theme.palette.secondary.light}80`,
		alignItems: "center",
		flexGrow: 1,
		width: "100%"
	},
	chipHolder: {
		display: "flex",
		gap: theme.spacing(1),
		flexWrap: "noWrap",
		backgroundColor: `${theme.palette.secondary.light}80`,
		alignItems: "center",
		overflow: "scroll",
		"&::-webkit-scrollbar": { display: "none" },
		flexGrow: 1
	},
	viewChip: {
		backgroundColor: theme.palette.secondary.main,
		color: "white",
		maxWidth: "150px",
		transition: "opacity 0.3s ease",
		marginLeft: theme.spacing(1)
	},
	menuItem: { backgroundColor: "white" },
	filterChipMenuIcon: {
		background: theme.palette.common.grey,
		padding: theme.spacing(1),
		color: theme.palette.primary.main
	},
	additionalFilterChip: {},
	KPI: {
		marginLeft: "auto",
		display: "flex",
		gap: theme.spacing(1),
		color: "grey",
		width: "auto"
	},
	kpiValue: {
		color: "black",
		fontSize: "1.1em"
	},
	kpiItem: {
		display: "flex",
		justifyContent: "center",
		width: "max-content"
	},
	kpiLabel: {
		width: "max-content",
		marginRight: theme.spacing(1)
	},
	clickedChip: {
		backgroundColor: theme.palette.primary.main,
		color: "white",
		maxWidth: "150px"
	},
	filterChipLabel: {
		color: theme.palette.text.primary,
		whiteSpace: "nowrap",
		marginRight: theme.spacing(1)
	},
	filterChipValue: {
		color: theme.palette.text.secondary,
		whiteSpace: "nowrap"
	}
}));
const ChipSection = (props) => {
	const $ = c(13);
	const { filterChips: t0, viewChips: t1, additionalFilterChips: t2, hideKpiSection: t3, kpiValues: t4, maxKPIsDisplayed: t5, handleDelete } = props;
	const filterChips = t0 === void 0 ? [] : t0;
	const viewChips = t1 === void 0 ? [] : t1;
	const additionalFilterChips = t2 === void 0 ? [] : t2;
	const hideKpiSection = t3 === void 0 ? false : t3;
	const kpiValues = t4 === void 0 ? [] : t4;
	const maxKPIsDisplayed = t5 === void 0 ? 4 : t5;
	const classes = useStyles();
	let t6;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t6 = [];
		$[0] = t6;
	} else t6 = $[0];
	const chipRefs = useRef(t6);
	const chipSectionContainerRef = useRef(null);
	const viewChipsContainerRef = useRef(null);
	const filterChipsContainerRef = useRef(null);
	const additionalFilterChipsContainerRef = useRef(null);
	const kpiContainerRef = useRef(null);
	const [selectedFilterChip, setSelectedFilterChip] = useState(null);
	const abbrNum = _temp;
	const isEmpty = _temp2;
	const abbreviateLabel = _temp3;
	let t7;
	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
		t7 = (chip) => {
			setSelectedFilterChip(chip);
			if (typeof chip.onToggle === "function") chip.onToggle();
		};
		$[1] = t7;
	} else t7 = $[1];
	const handleFilterChipToggle = t7;
	let t8;
	if ($[2] !== selectedFilterChip) {
		t8 = () => {
			if (selectedFilterChip) {
				if (typeof selectedFilterChip.onUntoggle === "function") selectedFilterChip.onUntoggle();
				setSelectedFilterChip(null);
			}
		};
		$[2] = selectedFilterChip;
		$[3] = t8;
	} else t8 = $[3];
	const handleFilterChipUntoggle = t8;
	const t9 = [
		kpiValues,
		additionalFilterChips,
		viewChips,
		filterChips
	].every(_temp4) ? "none" : "flex";
	let t10;
	if ($[4] !== t9) {
		t10 = { display: t9 };
		$[4] = t9;
		$[5] = t10;
	} else t10 = $[5];
	let t11;
	if ($[6] !== classes.viewChip || $[7] !== handleDelete) {
		t11 = (chip_0, index) => /* @__PURE__ */ React.createElement(Chip, {
			onDelete: () => handleDelete("view", index),
			key: index,
			label: chip_0.label,
			className: classes.viewChip,
			icon: /* @__PURE__ */ React.createElement(StarIcon, null),
			size: "small"
		});
		$[6] = classes.viewChip;
		$[7] = handleDelete;
		$[8] = t11;
	} else t11 = $[8];
	let t12;
	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
		t12 = { display: "flex" };
		$[9] = t12;
	} else t12 = $[9];
	let t13;
	if ($[10] !== classes.additionalFilterChip || $[11] !== handleDelete) {
		t13 = (chip_2, index_1) => /* @__PURE__ */ React.createElement(Chip, {
			variant: "outlined",
			onDelete: () => handleDelete("additionalFilter", index_1),
			key: index_1,
			label: chip_2.label,
			className: classes.additionalFilterChip,
			size: "small"
		});
		$[10] = classes.additionalFilterChip;
		$[11] = handleDelete;
		$[12] = t13;
	} else t13 = $[12];
	return /* @__PURE__ */ React.createElement("div", {
		ref: chipSectionContainerRef,
		className: classes.wrapper,
		style: t10
	}, /* @__PURE__ */ React.createElement("div", { className: classes.chipHolder }, /* @__PURE__ */ React.createElement("div", { ref: viewChipsContainerRef }, viewChips.map(t11)), !isEmpty(viewChips) && !isEmpty(filterChips) && /* @__PURE__ */ React.createElement(Divider, {
		orientation: "vertical",
		flexItem: true
	}), !isEmpty(filterChips) && /* @__PURE__ */ React.createElement(DynamicContainerWithMenu, {
		className: classes.chipHolder,
		ref: filterChipsContainerRef
	}, selectedFilterChip && /* @__PURE__ */ React.createElement(Chip, {
		onDelete: handleFilterChipUntoggle,
		label: selectedFilterChip.label,
		className: classes.viewChip,
		size: "small"
	}), filterChips.map((chip_1, index_0) => {
		if (selectedFilterChip && chip_1.id === selectedFilterChip.id) return null;
		return /* @__PURE__ */ React.createElement(Tooltip, { title: chip_1.label }, /* @__PURE__ */ React.createElement(Chip, {
			key: index_0,
			label: /* @__PURE__ */ React.createElement("div", { style: {
				display: "flex",
				flexWrap: "noWrap"
			} }, /* @__PURE__ */ React.createElement(Typography, {
				noWrap: true,
				className: chip_1.value ? classes.filterChipLabel : ""
			}, chip_1.label), /* @__PURE__ */ React.createElement(Typography, {
				noWrap: true,
				className: classes.filterChipValue
			}, chip_1.value)),
			className: classes.filterChip,
			size: "small",
			onClick: () => handleFilterChipToggle(chip_1),
			ref: (el) => chipRefs.current[index_0] = el
		}));
	})), !isEmpty(additionalFilterChips) && !isEmpty(filterChips) && /* @__PURE__ */ React.createElement(Divider, {
		orientation: "vertical",
		flexItem: true
	}), /* @__PURE__ */ React.createElement("div", {
		ref: additionalFilterChipsContainerRef,
		style: t12
	}, additionalFilterChips.map(t13))), !hideKpiSection && /* @__PURE__ */ React.createElement("div", {
		className: classes.KPI,
		ref: kpiContainerRef
	}, kpiValues.slice(0, 4).map((kpi, index_2) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
		className: classes.kpiItem,
		id: index_2
	}, /* @__PURE__ */ React.createElement("span", { className: classes.kpiLabel }, abbreviateLabel(kpi.label) && /* @__PURE__ */ React.createElement(Tooltip, {
		title: kpi.label,
		arrow: true
	}, /* @__PURE__ */ React.createElement(Typography, { noWrap: true }, /* @__PURE__ */ React.createElement("span", null, kpi.label, ":"))) || /* @__PURE__ */ React.createElement(React.Fragment, null, kpi.label)), /* @__PURE__ */ React.createElement("span", { className: classes.kpiValue }, /* @__PURE__ */ React.createElement(Tooltip, {
		title: kpi.value,
		arrow: true
	}, /* @__PURE__ */ React.createElement("span", null, abbrNum(kpi.value, 1))))), index_2 !== maxKPIsDisplayed - 1 && /* @__PURE__ */ React.createElement(Divider, {
		orientation: "vertical",
		flexItem: true
	})))));
};
ChipSection.propTypes = {
	filterChips: PropTypes.arrayOf(PropTypes.shape({
		label: PropTypes.string.isRequired,
		value: PropTypes.string.isRequired
	})),
	viewChips: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string.isRequired })),
	additionalFilterChips: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string.isRequired })),
	hideKpiSection: PropTypes.bool,
	kpiValues: PropTypes.arrayOf(PropTypes.shape({
		label: PropTypes.string.isRequired,
		value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
	})),
	maxKPIsDisplayed: PropTypes.number,
	handleDelete: PropTypes.func,
	selectedFilterChipsIndex: PropTypes.number,
	setSelectedFilterChipsIndex: PropTypes.func
};
function _temp(number, decPlaces) {
	if (typeof number === "string" && !isNaN(Number(number))) number = Number(number);
	else if (typeof number !== "number") throw new Error("The input must be a number or a string that can be converted to a number.");
	if (typeof decPlaces !== "number") return null;
	decPlaces = Math.pow(10, decPlaces);
	const abbrev = [
		"k",
		"m",
		"b",
		"t"
	];
	for (let i = abbrev.length - 1; i >= 0; i--) {
		const size = Math.pow(10, (i + 1) * 3);
		if (size <= number) {
			number = Math.round(number * decPlaces / size) / decPlaces;
			if (number === 1e3 && i < abbrev.length - 1) {
				number = 1;
				i++;
			}
			number = number + abbrev[i];
			break;
		}
	}
	return number;
}
function _temp2(array) {
	return Array.isArray(array) && array.length === 0;
}
function _temp3(label) {
	if (label.length > 10) return label.slice(0, 7) + "...";
	else return null;
}
function _temp4(arr) {
	return arr.length === 0;
}
//#endregion
export { ChipSection };

//# sourceMappingURL=ChipSection.mjs.map