import { UnityFluentIcon } from "../../../utilities/iconLibrary/UnityFluentIcon.mjs";
import { getEllipseColor, getEllipseHintColor } from "../../../utilities/style/utils/styleUtils.mjs";
import { Ellipse } from "./Ellipse.mjs";
import { c } from "react-compiler-runtime";
import React from "react";
import { IconButton, Typography, makeStyles, useTheme } from "@material-ui/core";
import PropTypes from "prop-types";
//#region src/UI/components/dataDisplay/Token.jsx
const useStyles = makeStyles((theme) => ({
	root: { margin: (props) => props.compact ? theme.spacing(.5) : theme.spacing(1) },
	letter: {
		fontSize: (props) => props.size === "small" ? theme.spacing(2.25) : theme.spacing(2.5),
		color: (props) => getEllipseColor(theme, props.color)
	},
	buttonRoot: {
		margin: theme.spacing(1),
		width: (props) => props.size === "small" ? theme.spacing(4) : theme.spacing(5),
		height: (props) => props.size === "small" ? theme.spacing(4) : theme.spacing(5),
		background: (props) => props.variant === "filled" ? getEllipseHintColor(theme, props.color) : "",
		border: (props) => props.variant === "outlined" ? `1px solid` : "none",
		borderColor: (props) => props.variant === "outlined" ? getEllipseColor(theme, props.color) : ""
	}
}));
const Token = (props) => {
	const $ = c(34);
	const { type: t0, variant: t1, color: t2, size: t3, iconType, icon, letter: t4, IconEllipseProps, onClick } = props;
	const type = t0 === void 0 ? "default" : t0;
	const variant = t1 === void 0 ? "outlined" : t1;
	const color = t2 === void 0 ? "default" : t2;
	const size = t3 === void 0 ? "large" : t3;
	const letter = t4 === void 0 ? "A" : t4;
	const classes = useStyles(props);
	const theme = useTheme();
	let t5;
	if ($[0] !== color || $[1] !== theme) {
		t5 = getEllipseColor(theme, color);
		$[0] = color;
		$[1] = theme;
		$[2] = t5;
	} else t5 = $[2];
	const iconColor = t5;
	let t6;
	if ($[3] !== classes.letter || $[4] !== icon || $[5] !== iconColor || $[6] !== iconType || $[7] !== letter || $[8] !== size || $[9] !== type) {
		t6 = type === "letter" ? /* @__PURE__ */ React.createElement(Typography, {
			variant: "body1",
			className: classes.letter
		}, letter.toUpperCase()) : /* @__PURE__ */ React.createElement(UnityFluentIcon, {
			size: size === "small" ? size : "medium",
			color: iconColor,
			type: iconType,
			icon,
			style: { color: iconColor }
		});
		$[3] = classes.letter;
		$[4] = icon;
		$[5] = iconColor;
		$[6] = iconType;
		$[7] = letter;
		$[8] = size;
		$[9] = type;
		$[10] = t6;
	} else t6 = $[10];
	let t7;
	if ($[11] !== IconEllipseProps || $[12] !== color || $[13] !== size || $[14] !== t6 || $[15] !== variant) {
		t7 = /* @__PURE__ */ React.createElement(Ellipse, {
			variant,
			size,
			color,
			...IconEllipseProps
		}, t6);
		$[11] = IconEllipseProps;
		$[12] = color;
		$[13] = size;
		$[14] = t6;
		$[15] = variant;
		$[16] = t7;
	} else t7 = $[16];
	let t8;
	if ($[17] !== classes.root || $[18] !== t7) {
		t8 = /* @__PURE__ */ React.createElement("div", { className: classes.root }, t7);
		$[17] = classes.root;
		$[18] = t7;
		$[19] = t8;
	} else t8 = $[19];
	const tokenComponent = t8;
	if (type === "action") {
		let t9;
		if ($[20] !== classes.buttonRoot) {
			t9 = { root: classes.buttonRoot };
			$[20] = classes.buttonRoot;
			$[21] = t9;
		} else t9 = $[21];
		const t10 = size === "small" ? size : "medium";
		let t11;
		if ($[22] !== iconColor) {
			t11 = { color: iconColor };
			$[22] = iconColor;
			$[23] = t11;
		} else t11 = $[23];
		let t12;
		if ($[24] !== icon || $[25] !== iconColor || $[26] !== iconType || $[27] !== t10 || $[28] !== t11) {
			t12 = /* @__PURE__ */ React.createElement(UnityFluentIcon, {
				size: t10,
				color: iconColor,
				type: iconType,
				icon,
				style: t11
			});
			$[24] = icon;
			$[25] = iconColor;
			$[26] = iconType;
			$[27] = t10;
			$[28] = t11;
			$[29] = t12;
		} else t12 = $[29];
		let t13;
		if ($[30] !== onClick || $[31] !== t12 || $[32] !== t9) {
			t13 = /* @__PURE__ */ React.createElement(IconButton, {
				classes: t9,
				onClick
			}, t12);
			$[30] = onClick;
			$[31] = t12;
			$[32] = t9;
			$[33] = t13;
		} else t13 = $[33];
		return t13;
	}
	return tokenComponent;
};
Token.propTypes = {
	type: PropTypes.string,
	variant: PropTypes.string,
	color: PropTypes.string,
	size: PropTypes.string,
	iconType: PropTypes.string,
	icon: PropTypes.elementType,
	letter: PropTypes.string,
	onClick: PropTypes.func
};
//#endregion
export { Token };

//# sourceMappingURL=Token.mjs.map