import { c } from "react-compiler-runtime";
import React from "react";
import { Avatar, Typography, makeStyles } from "@material-ui/core";
import clsx from "clsx";
//#region src/UI/widgets/FluentComponents/atoms/FluentDisplayNumbers.jsx
const useStyles = makeStyles((theme) => ({
	root: {
		display: "flex",
		flexDirection: "row"
	},
	regular: {},
	small: {},
	number: {
		"$regular &": { fontSize: "4rem" },
		"$small &": { fontSize: 30 }
	},
	unit: {
		marginTop: theme.spacing(5),
		width: 25,
		height: 25,
		"$small &": {
			marginTop: "16px",
			width: "16px",
			height: "16px",
			"& .MuiTypography-subtitle1": { fontSize: "0.7rem" }
		}
	},
	unitValue: { marginTop: -1.75 }
}), { name: "FluentDisplayNumbers" });
const FluentDisplayNumbers = (props) => {
	const $ = c(20);
	const classes = useStyles();
	const { small, number: rawNumber } = props;
	let t0;
	if ($[0] !== rawNumber) {
		t0 = [rawNumber, null];
		$[0] = rawNumber;
		$[1] = t0;
	} else t0 = $[1];
	let no = t0;
	if (rawNumber > 1e6) {
		const newNumber = rawNumber / 1e6;
		const t1 = Math.round(newNumber * 10) / 10;
		let t2;
		if ($[2] !== t1) {
			t2 = [t1, "M"];
			$[2] = t1;
			$[3] = t2;
		} else t2 = $[3];
		no = t2;
	} else if (rawNumber > 1e3) {
		const newNumber_0 = rawNumber / 1e3;
		const t1 = Math.round(newNumber_0 * 10) / 10;
		let t2;
		if ($[4] !== t1) {
			t2 = [t1, "k"];
			$[4] = t1;
			$[5] = t2;
		} else t2 = $[5];
		no = t2;
	}
	const [number, unit] = no;
	const t1 = small ? classes.small : classes.regular;
	let t2;
	if ($[6] !== classes.root || $[7] !== t1) {
		t2 = clsx(classes.root, t1);
		$[6] = classes.root;
		$[7] = t1;
		$[8] = t2;
	} else t2 = $[8];
	let t3;
	if ($[9] !== classes.number || $[10] !== number) {
		t3 = /* @__PURE__ */ React.createElement(Typography, { className: classes.number }, number);
		$[9] = classes.number;
		$[10] = number;
		$[11] = t3;
	} else t3 = $[11];
	let t4;
	if ($[12] !== classes.unit || $[13] !== classes.unitValue || $[14] !== unit) {
		t4 = unit && /* @__PURE__ */ React.createElement(Avatar, { className: classes.unit }, /* @__PURE__ */ React.createElement(Typography, {
			variant: "subtitle1",
			className: classes.unitValue
		}, unit));
		$[12] = classes.unit;
		$[13] = classes.unitValue;
		$[14] = unit;
		$[15] = t4;
	} else t4 = $[15];
	let t5;
	if ($[16] !== t2 || $[17] !== t3 || $[18] !== t4) {
		t5 = /* @__PURE__ */ React.createElement("div", { className: t2 }, t3, t4);
		$[16] = t2;
		$[17] = t3;
		$[18] = t4;
		$[19] = t5;
	} else t5 = $[19];
	return t5;
};
//#endregion
export { FluentDisplayNumbers as default };

//# sourceMappingURL=FluentDisplayNumbers.mjs.map