import { getEllipseColor } from "../../../../utilities/style/utils/styleUtils.mjs";
import { Ellipse } from "../../../../UI/components/dataDisplay/Ellipse.mjs";
import { c } from "react-compiler-runtime";
import React, { useState } from "react";
import { Typography, makeStyles } from "@material-ui/core";
import clsx from "clsx";
import PropTypes from "prop-types";
//#region src/componentSystems/multiThreadTimeline/ui/modified/TimelineToken.jsx
const useStyles = makeStyles((theme) => ({
	root: {
		margin: (props) => props.compact ? theme.spacing(.5) : theme.spacing(1),
		display: "flex",
		justifyContent: "center"
	},
	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)
	},
	hover: {
		zIndex: 9,
		position: "absolute",
		top: 0,
		left: 0
	}
}));
const TimelineToken = (props) => {
	const $ = c(24);
	const { type: t0, variant: t1, color: t2, size: t3, icon, letter: t4, IconEllipseProps, className, hoverContainer, isHover } = props;
	const type = t0 === void 0 ? "default" : t0;
	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 [hover, setHover] = useState(false);
	let t5;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t5 = () => {
			setHover(true);
		};
		$[0] = t5;
	} else t5 = $[0];
	const hoverFunction = t5;
	let t6;
	if ($[1] !== className || $[2] !== classes.root) {
		t6 = clsx(classes.root, className);
		$[1] = className;
		$[2] = classes.root;
		$[3] = t6;
	} else t6 = $[3];
	let t7;
	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
		t7 = () => setHover(false);
		$[4] = t7;
	} else t7 = $[4];
	let t8;
	if ($[5] !== classes.letter || $[6] !== icon || $[7] !== letter || $[8] !== type) {
		t8 = type === "letter" ? /* @__PURE__ */ React.createElement(Typography, {
			variant: "body1",
			className: classes.letter
		}, letter.toUpperCase()) : /* @__PURE__ */ React.createElement("div", null, " ", icon, " ");
		$[5] = classes.letter;
		$[6] = icon;
		$[7] = letter;
		$[8] = type;
		$[9] = t8;
	} else t8 = $[9];
	let t9;
	if ($[10] !== IconEllipseProps || $[11] !== color || $[12] !== size || $[13] !== t8) {
		t9 = /* @__PURE__ */ React.createElement(Ellipse, {
			variant: "filled",
			size,
			color,
			...IconEllipseProps
		}, t8);
		$[10] = IconEllipseProps;
		$[11] = color;
		$[12] = size;
		$[13] = t8;
		$[14] = t9;
	} else t9 = $[14];
	let t10;
	if ($[15] !== classes.hover || $[16] !== hover || $[17] !== hoverContainer || $[18] !== isHover) {
		t10 = isHover && /* @__PURE__ */ React.createElement("div", {
			className: classes.hover,
			style: { display: hover ? "inline" : "none" }
		}, hoverContainer);
		$[15] = classes.hover;
		$[16] = hover;
		$[17] = hoverContainer;
		$[18] = isHover;
		$[19] = t10;
	} else t10 = $[19];
	let t11;
	if ($[20] !== t10 || $[21] !== t6 || $[22] !== t9) {
		t11 = /* @__PURE__ */ React.createElement("div", {
			className: t6,
			onMouseEnter: hoverFunction,
			onMouseLeave: t7
		}, t9, t10);
		$[20] = t10;
		$[21] = t6;
		$[22] = t9;
		$[23] = t11;
	} else t11 = $[23];
	return t11;
};
TimelineToken.propTypes = {
	type: PropTypes.string,
	variant: PropTypes.string,
	color: PropTypes.string,
	size: PropTypes.string,
	iconType: PropTypes.string,
	icon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.object]),
	letter: PropTypes.string,
	IconEllipseProps: PropTypes.object,
	iconColorOverride: PropTypes.string,
	onClick: PropTypes.func,
	className: PropTypes.string,
	hoverContainer: PropTypes.element,
	isHover: PropTypes.bool
};
//#endregion
export { TimelineToken };

//# sourceMappingURL=TimelineToken.mjs.map