import { c } from "react-compiler-runtime";
import React, { Fragment } from "react";
import { Avatar, colors, makeStyles } from "@material-ui/core";
import clsx from "clsx";
//#region src/UI/widgets/utils/NumberVisualization.jsx
const useStyles = makeStyles((theme) => ({
	root: {
		minWidth: 30,
		minHeight: 30,
		maxWidth: 70,
		maxHeight: 70,
		color: theme?.palette?.primary?.dark
	},
	positive: { backgroundColor: (props) => colors.teal[Math.ceil(props.number * 5 / 100) * 100] },
	negative: { backgroundColor: (props) => colors.deepOrange[Math.abs(Math.ceil(props.number * 5 / 100) * 100)] }
}));
const NumberVisualization = (props) => {
	const $ = c(22);
	const classes = useStyles(props);
	const { number } = props;
	let displayCircle;
	if (number > 0) {
		let t0;
		if ($[0] !== classes.positive || $[1] !== classes.root) {
			t0 = clsx(classes.root, classes.positive);
			$[0] = classes.positive;
			$[1] = classes.root;
			$[2] = t0;
		} else t0 = $[2];
		const t1 = number * 2;
		const t2 = number * 2;
		let t3;
		if ($[3] !== t1 || $[4] !== t2) {
			t3 = {
				width: t1,
				height: t2
			};
			$[3] = t1;
			$[4] = t2;
			$[5] = t3;
		} else t3 = $[5];
		let t4;
		if ($[6] !== number || $[7] !== t0 || $[8] !== t3) {
			t4 = /* @__PURE__ */ React.createElement(Avatar, {
				className: t0,
				style: t3
			}, number);
			$[6] = number;
			$[7] = t0;
			$[8] = t3;
			$[9] = t4;
		} else t4 = $[9];
		displayCircle = t4;
	} else {
		let t0;
		if ($[10] !== classes.negative || $[11] !== classes.root) {
			t0 = clsx(classes.root, classes.negative);
			$[10] = classes.negative;
			$[11] = classes.root;
			$[12] = t0;
		} else t0 = $[12];
		const t1 = number * 2;
		const t2 = number * 2;
		let t3;
		if ($[13] !== t1 || $[14] !== t2) {
			t3 = {
				width: t1,
				height: t2
			};
			$[13] = t1;
			$[14] = t2;
			$[15] = t3;
		} else t3 = $[15];
		let t4;
		if ($[16] !== number || $[17] !== t0 || $[18] !== t3) {
			t4 = /* @__PURE__ */ React.createElement(Avatar, {
				className: t0,
				style: t3
			}, number);
			$[16] = number;
			$[17] = t0;
			$[18] = t3;
			$[19] = t4;
		} else t4 = $[19];
		displayCircle = t4;
	}
	let t0;
	if ($[20] !== displayCircle) {
		t0 = /* @__PURE__ */ React.createElement(Fragment, null, " ", displayCircle, " ");
		$[20] = displayCircle;
		$[21] = t0;
	} else t0 = $[21];
	return t0;
};
//#endregion
export { NumberVisualization as default };

//# sourceMappingURL=NumberVisualization.mjs.map