import { LayoutUnit } from "../../../layout/LayoutUnit.mjs";
import { TimelineDateBar } from "./TimelineDateBar.mjs";
import { TimelineHoverCard } from "./TimelineHoverCard.mjs";
import { TimelineStatus } from "./TimelineStatus.mjs";
import { TimelineTokenSummary } from "./TimelineTokenSummary.mjs";
import { c } from "react-compiler-runtime";
import React, { memo, useState } from "react";
import { Typography, makeStyles } from "@material-ui/core";
import PropTypes from "prop-types";
//#region src/componentSystems/multiThreadTimeline/ui/TimelineNode.jsx
const useStyles = makeStyles((theme) => ({
	root: {},
	wrapper: {
		display: "flex",
		flexDirection: "column",
		alignContent: "space-between",
		alignItems: "center"
	},
	label: {
		width: 46,
		textAlign: "center"
	}
}));
const TimelineNode = memo((props) => {
	const $ = c(37);
	const [hover, setHover] = useState(false);
	const { data, height: t0, details: t1, show: t2, width, dot, iconColor, dotColor, test, icon } = props;
	const height = t0 === void 0 ? 187 : t0;
	const details = t1 === void 0 ? true : t1;
	const show = t2 === void 0 ? false : t2;
	const classes = useStyles(props);
	const capitalizeFirstLetter = _temp;
	let t3;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t3 = (str_0) => {
			let formattedStr = "";
			let lineCount = 0;
			const words = str_0.split(" ");
			for (let i = 0; i < words.length && lineCount < 2; i++) {
				let line = "";
				while (i < words.length && line.length + words[i].length <= 8) {
					line = line + (capitalizeFirstLetter(words[i]) + " ");
					i++;
				}
				if (line.length > 8) line = line.slice(0, 5) + "...";
				formattedStr = formattedStr + (line.trim() + "\n");
				lineCount++;
				i--;
			}
			return formattedStr.trim();
		};
		$[0] = t3;
	} else t3 = $[0];
	const formatString = t3;
	let t4;
	if ($[1] !== hover) {
		t4 = () => setHover(!hover);
		$[1] = hover;
		$[2] = t4;
	} else t4 = $[2];
	const t5 = classes.root;
	const t6 = details && "whitesmoke";
	let t7;
	if ($[3] !== t6 || $[4] !== width) {
		t7 = {
			background: t6,
			width
		};
		$[3] = t6;
		$[4] = width;
		$[5] = t7;
	} else t7 = $[5];
	let t8;
	if ($[6] !== test) {
		t8 = /* @__PURE__ */ React.createElement("div", null, test, " ");
		$[6] = test;
		$[7] = t8;
	} else t8 = $[7];
	let t9;
	if ($[8] !== classes.label || $[9] !== classes.wrapper || $[10] !== data || $[11] !== details || $[12] !== dot || $[13] !== dotColor || $[14] !== height || $[15] !== hover || $[16] !== icon || $[17] !== iconColor || $[18] !== show) {
		let t10;
		if ($[20] !== classes.label || $[21] !== classes.wrapper || $[22] !== details || $[23] !== dot || $[24] !== dotColor || $[25] !== height || $[26] !== hover || $[27] !== icon || $[28] !== iconColor || $[29] !== show) {
			t10 = (item) => /* @__PURE__ */ React.createElement("div", null, (hover || show) && /* @__PURE__ */ React.createElement(TimelineHoverCard, { offset: 0 }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, item.details.shortDescription)), /* @__PURE__ */ React.createElement("div", null, item.details.data1 ? /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, item.details.data1) : /* @__PURE__ */ React.createElement(TimelineStatus, { status: item.details.data2 })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, item.details.date)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, item.details.data3))), /* @__PURE__ */ React.createElement("div", {
				className: classes.wrapper,
				style: { height: height - 4 }
			}, /* @__PURE__ */ React.createElement("div", { style: { marginRight: -8 } }, /* @__PURE__ */ React.createElement(TimelineTokenSummary, {
				dot,
				color: dotColor,
				relative: true,
				timelineItem: item.details.transactionType,
				iconColor,
				icon,
				removeHeight: true
			})), /* @__PURE__ */ React.createElement("div", {
				className: classes.label,
				style: { marginTop: !details && -3 }
			}, dot && /* @__PURE__ */ React.createElement(Typography, {
				variant: "subtitle2",
				style: { lineHeight: "0.9rem" }
			}, formatString(item.details.shortDescription))), details && /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), details && /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement("div", null, item.details.data1 && item.details.data1.toString().trim() !== "" ? /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, item.details.data1) : /* @__PURE__ */ React.createElement(TimelineStatus, { status: Number(item.details.data2) })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, item.details.date)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, item.details.data3)))), details && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TimelineDateBar, { month: Number(item.date.toString().charAt(0)) })));
			$[20] = classes.label;
			$[21] = classes.wrapper;
			$[22] = details;
			$[23] = dot;
			$[24] = dotColor;
			$[25] = height;
			$[26] = hover;
			$[27] = icon;
			$[28] = iconColor;
			$[29] = show;
			$[30] = t10;
		} else t10 = $[30];
		t9 = data.map(t10);
		$[8] = classes.label;
		$[9] = classes.wrapper;
		$[10] = data;
		$[11] = details;
		$[12] = dot;
		$[13] = dotColor;
		$[14] = height;
		$[15] = hover;
		$[16] = icon;
		$[17] = iconColor;
		$[18] = show;
		$[19] = t9;
	} else t9 = $[19];
	let t10;
	if ($[31] !== classes.root || $[32] !== t4 || $[33] !== t7 || $[34] !== t8 || $[35] !== t9) {
		t10 = /* @__PURE__ */ React.createElement("div", {
			onMouseDownCapture: t4,
			className: t5,
			style: t7
		}, t8, t9);
		$[31] = classes.root;
		$[32] = t4;
		$[33] = t7;
		$[34] = t8;
		$[35] = t9;
		$[36] = t10;
	} else t10 = $[36];
	return t10;
});
TimelineNode.propTypes = {
	data: PropTypes.array.isRequired,
	height: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
	details: PropTypes.bool,
	show: PropTypes.bool,
	width: PropTypes.oneOfType([
		PropTypes.string,
		PropTypes.number,
		PropTypes.bool
	]),
	dot: PropTypes.bool,
	iconColor: PropTypes.string,
	dotColor: PropTypes.string,
	test: PropTypes.string,
	icon: PropTypes.element
};
function _temp(str) {
	return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}
//#endregion
export { TimelineNode };

//# sourceMappingURL=TimelineNode.mjs.map