import { IconRenderer } from "../../../UI/templates/ui/renderers/IconRenderer.mjs";
import { TimelineNode } from "../ui/TimelineNode.mjs";
import { TimelineWrapper } from "../ui/TimelineWrapper.mjs";
import { MultiDot } from "../ui/MultiDot.mjs";
import { VisualizationDot } from "../ui/VisualizationDot.mjs";
import { TimelinePreloaderNode } from "../ui/TimelinePreloaderNode.mjs";
import { MttYearTag } from "../ui/MttYearTag.mjs";
import { DynamicRangeSlider } from "../ui/DynamicRangeSlider.mjs";
import { HeightAdjuster } from "./HeightAdjust.mjs";
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Button, Fade, Typography, lighten, makeStyles, useTheme } from "@material-ui/core";
import "react-range-slider-input/dist/style.css";
//#region src/componentSystems/multiThreadTimeline/mttMainTimeline/MttTimeline.jsx
const useStyles = makeStyles((theme) => ({
	root: {},
	horizontalDash: {
		backgroundImage: "linear-gradient(to right, grey 33%, rgba(255,255,255,0) 0%)",
		backgroundPosition: "bottom",
		backgroundSize: "16px 1px",
		backgroundRepeat: "repeat-x"
	},
	slider: { height: 600 },
	categoryBar: {
		background: lighten(theme.palette.common.black, .5),
		color: theme.palette.common.white,
		display: "flex",
		alignItems: "center"
	},
	categoryBarPlacement: {
		position: "absolute",
		left: 0
	},
	categoryLabel: {
		transform: "rotate(90deg)",
		width: 28
	},
	button: { "&:hover": { textDecoration: "line-through" } }
}));
const MttTimeline = memo((props) => {
	const [showAllDetails] = useState(false);
	const [startRange, setStartRange] = useState(10);
	const [endRange, setEndRange] = useState();
	const [startDate, setStartDate] = useState();
	const [endDate, setEndDate] = useState();
	const [displayRangeFilter, setDisplayRangeFilter] = useState(true);
	const [threadHeight, setThreadHeight] = useState(92);
	const [recordLength, setRecordLength] = useState();
	const [containerWidth, setContainerWidth] = useState();
	const [showMonthMarkers, setShowMonthMarkers] = useState(false);
	const [showYearMarkers, setShowYearMarkers] = useState(false);
	const [verticalAdjuster, setVerticalAdjuster] = useState(4.5);
	const [uniqueTimelines, setUniqueTimelines] = useState(0);
	const classes = useStyles(props);
	const { data, loading } = props;
	const theme = useTheme();
	const visualizationYScale = 40;
	useEffect(() => {
		const years = [];
		data && data.map((item) => {
			years.push(item.date.slice(-4));
		});
		const uniqueYears = [...new Set(years)].sort();
		data && setStartDate(uniqueYears[0] + "-01-01");
		data && setEndDate(uniqueYears[uniqueYears.length - 1] + "-12-31");
	}, [data]);
	const mainContainer = useRef(null);
	useEffect(() => {
		setContainerWidth(mainContainer.current ? mainContainer.current.offsetWidth : 0);
	}, []);
	let movement_timer = null;
	const RESET_TIMEOUT = 10;
	const set_dimensions = () => {
		if (mainContainer.current) setContainerWidth(mainContainer.current.offsetWidth);
	};
	window.addEventListener("resize", () => {
		clearInterval(movement_timer);
		movement_timer = setTimeout(set_dimensions, RESET_TIMEOUT);
	});
	const years_0 = [];
	data && data.map((item_0) => {
		years_0.push(item_0.date.slice(-4));
	});
	const uniqueYears_0 = [...new Set(years_0)];
	let demoApiConfigDate = [];
	uniqueYears_0.map((item_1) => {
		demoApiConfigDate.push("01/01/" + item_1);
	});
	let yearsInRange = [];
	yearsInRange.push(Number(demoApiConfigDate[1]?.slice(-4)) + 1);
	let yearsToDisplay = [];
	yearsInRange.map((item_2) => {
		yearsToDisplay.push("01/01/" + item_2);
	});
	demoApiConfigDate.map((item_3) => {
		yearsToDisplay.unshift(item_3);
	});
	const yearRange = yearsToDisplay.sort();
	const getSingleGroupedData = useCallback(() => {
		const flatOne = data && data.map((item_4) => item_4.dates).flat();
		return data && flatOne && flatOne.map((item_5) => {
			return item_5.details;
		});
	}, [data]);
	const sortDate = data && getSingleGroupedData().sort(function(a, b) {
		return new Date(a.date) - new Date(b.date);
	});
	let dataConvertedDate = data && sortDate.map((item_6) => ({
		...item_6,
		date: new Date(item_6.date).toLocaleDateString()
	}));
	function formatDate(date) {
		return new Date(date).toLocaleDateString("en-US");
	}
	const getPositionFromDate = useCallback((initDate) => {
		const start = new Date(yearRange[1]);
		const end = new Date(yearRange[2]);
		const rangeStart = [initDate];
		const dateList = [new Date(start).toLocaleDateString()];
		let loop = new Date(start);
		while (loop <= end) {
			const newDate = loop.setDate(loop.getDate() + 1);
			loop = new Date(newDate);
			dateList.push(loop.toLocaleDateString());
		}
		const mappedToObjects = dateList.map(function(value) {
			return { date: value };
		});
		const plots = [];
		for (let i = 1; i <= dateList.length; i++) plots.push(i);
		return mappedToObjects.map((o, i_0) => ({
			...o,
			plots: plots[i_0] || null
		})).filter(({ date: date_0 }) => rangeStart.includes(date_0)).map(({ plots: plots_0 }) => plots_0).toString();
	}, [yearRange]);
	let demoDates = [];
	dataConvertedDate && dataConvertedDate.map((item_7) => {
		demoDates.push(item_7.date);
	});
	let unique = [...new Set(demoDates)];
	useEffect(() => {
		setEndRange(unique && Number(getPositionFromDate(unique.slice(-1).pop())) + 66);
	}, []);
	const getDatesFromRangeSelectionCompact = useCallback((left, right) => {
		const rangeStart_0 = [Math.round(left)];
		const rangeEnd = [Math.round(right)];
		let demoDates_0 = [];
		dataConvertedDate && dataConvertedDate.map((item_8) => {
			demoDates_0.push(item_8.date);
		});
		let unique_0 = [...new Set(demoDates_0)];
		const getNextDay = () => {
			const dateString = unique_0[unique_0.length - 1];
			const date_1 = new Date(dateString);
			date_1.setDate(date_1.getDate() + 1);
			return `${date_1.getMonth() + 1}/${date_1.getDate()}/${date_1.getFullYear()}`;
		};
		const nextDay = getNextDay();
		unique_0.push(nextDay);
		const mappedToObjects_0 = unique_0.map(function(value_0) {
			return { date: value_0 };
		});
		const plots_1 = [];
		for (let i_1 = 1; i_1 <= unique_0.length; i_1++) plots_1.push(i_1 * 10);
		let mergePlots_0 = mappedToObjects_0.map((o_0, i_2) => ({
			...o_0,
			plots: plots_1[i_2] || null
		}));
		const startDate_1 = mergePlots_0.filter(({ plots: plots_2 }) => rangeStart_0.includes(plots_2)).map(({ date: date_2 }) => date_2).toString();
		const endDate_0 = mergePlots_0.filter(({ plots: plots_3 }) => rangeEnd.includes(plots_3)).map(({ date: date_3 }) => date_3).toString();
		setStartDate(startDate_1);
		setEndDate(endDate_0);
	}, [dataConvertedDate]);
	const getRangeValues = useCallback((rangeValue) => {
		const left_0 = rangeValue[0];
		const right_0 = rangeValue[1];
		setStartRange(Math.round(left_0));
		setEndRange(Math.round(right_0));
	}, []);
	const processRangeValues = () => {
		endRange && getDatesFromRangeSelectionCompact(startRange, endRange);
	};
	const plotYV = useCallback((item_9) => {
		const plotDate = [item_9];
		let demoDates_1 = [];
		dataConvertedDate && dataConvertedDate.map((item_10) => {
			demoDates_1.push(item_10.date);
		});
		let demoDatesTwo = [];
		data && data.map((item_11) => {
			demoDatesTwo.push(item_11.date);
		});
		let unique_1 = [...new Set(demoDatesTwo)];
		const mappedToObjects_1 = unique_1.map((date_4) => new Date(date_4)).sort((a_0, b_0) => a_0.getTime() - b_0.getTime()).map((date_5) => date_5.toLocaleDateString()).map(function(value_1) {
			return { date: value_1 };
		});
		const plots_4 = [];
		for (let i_3 = 1; i_3 <= unique_1.length; i_3++) plots_4.push(i_3);
		return mappedToObjects_1.map((o_1, i_4) => ({
			...o_1,
			plots: plots_4[i_4] || null
		})).filter(({ date: date_6 }) => plotDate.includes(date_6)).map(({ plots: plots_5 }) => plots_5).map((item_12) => {
			return item_12;
		});
	}, [data, dataConvertedDate]);
	function compareDate(date1, date2, comparison) {
		const date1Month = Number(date1.split("/")[0]);
		const date2Month = Number(date2.split("/")[0]);
		const date1Day = Number(date1.split("/")[1]);
		const date2Day = Number(date2.split("/")[1]);
		const date1Year = Number(date1.split("/")[2]);
		const date2Year = Number(date2.split("/")[2]);
		if (comparison === ">") {
			if (date1Year > date2Year) return true;
			else if (date1Year === date2Year) {
				if (date1Month > date2Month) return true;
				else if (date1Month === date2Month) {
					if (date1Day > date2Day) return true;
				}
			}
			return false;
		} else {
			if (date1Year < date2Year) return true;
			else if (date1Year === date2Year) {
				if (date1Month < date2Month) return true;
				else if (date1Month === date2Month) {
					if (date1Day < date2Day) return true;
				}
			}
			return false;
		}
	}
	function minnifyTimelineObject(object) {
		let cleanObject = [];
		let notUsed = false;
		object.forEach((obj, i_5) => {
			if (cleanObject.length === 0) cleanObject.push({
				timeline: obj.timeline,
				subThread: obj.subThread,
				firstDate: formatDate(obj.date),
				lastDate: formatDate(obj.date),
				color: obj.color,
				icon: obj.iconID
			});
			else {
				notUsed = true;
				cleanObject.forEach((clnObj) => {
					if (obj.timeline === clnObj.timeline && obj.subThread === clnObj.subThread) {
						if (compareDate(formatDate(obj.date), formatDate(clnObj.firstDate), "<")) clnObj.firstDate = formatDate(obj.date);
						else if (compareDate(formatDate(obj.date), formatDate(clnObj.lastDate), ">")) clnObj.lastDate = formatDate(obj.date);
						notUsed = false;
					}
				});
			}
			if (notUsed) cleanObject.push({
				timeline: obj.timeline,
				subThread: obj.subThread,
				firstDate: formatDate(obj.date),
				lastDate: formatDate(obj.date),
				color: obj.color,
				icon: obj.iconID
			});
		});
		return cleanObject;
	}
	let dates = [];
	dataConvertedDate && dataConvertedDate.map((item_13) => {
		dates.push(item_13.date);
	});
	const plots_6 = [];
	for (let i_6 = 1; i_6 <= unique.length; i_6++) plots_6.push(i_6);
	const startDateSet = useMemo(() => new Date(startDate), [startDate]);
	const endDateSet = useMemo(() => new Date(endDate), [endDate]);
	const filteredByDate = data && data.filter((item_14) => {
		const date_7 = new Date(item_14.date);
		return date_7 >= startDateSet && date_7 < endDateSet;
	});
	const buildCategoryLines = useCallback(() => {
		const xLine = data && filteredByDate?.map((item_15) => {
			return item_15.timeline.toString() + "." + item_15.subThread.toString();
		});
		return [...new Set(xLine)];
	}, [filteredByDate, data]);
	const minnifiedResult = data && minnifyTimelineObject(filteredByDate);
	const detailedComponentSize = 130;
	const summaryComponentSize = 73;
	const summaryBreakpoint = Math.round(containerWidth / detailedComponentSize);
	const overviewBreakpoint = Math.round(containerWidth / summaryComponentSize);
	useEffect(() => {
		setRecordLength((data && data.filter((item_16) => {
			const date_8 = new Date(item_16.date);
			return date_8 >= startDateSet && date_8 <= endDateSet;
		}))?.length);
	}, [
		data,
		endDateSet,
		startDateSet
	]);
	const checkLinearLength = [];
	filteredByDate?.forEach((item_17) => {
		checkLinearLength.push(item_17.date);
	});
	let uniqueNodeScaleAmount = [...new Set(checkLinearLength)].length;
	useCallback(() => {
		if (uniqueNodeScaleAmount > overviewBreakpoint) return 50;
		else if (uniqueNodeScaleAmount >= summaryBreakpoint) return summaryComponentSize;
		else return 186;
	}, [
		uniqueNodeScaleAmount,
		summaryBreakpoint,
		overviewBreakpoint
	]);
	const getXScale = useCallback(() => {
		if (uniqueNodeScaleAmount > overviewBreakpoint) return 50;
		else if (uniqueNodeScaleAmount >= summaryBreakpoint) return summaryComponentSize;
		else return 186;
	}, [
		uniqueNodeScaleAmount,
		summaryBreakpoint,
		overviewBreakpoint
	]);
	const getYScale = useCallback(() => {
		if (uniqueNodeScaleAmount > overviewBreakpoint) return 50;
		else if (uniqueNodeScaleAmount >= summaryBreakpoint) return summaryComponentSize;
		else return 130;
	}, [
		uniqueNodeScaleAmount,
		summaryBreakpoint,
		overviewBreakpoint
	]);
	const topMargin = uniqueNodeScaleAmount >= summaryBreakpoint ? 48 : 0;
	const plotXV = useCallback((timeline, subThread) => {
		const xLine_0 = data && data.map((item_18) => {
			return item_18.timeline + "." + item_18.subThread;
		});
		const sortedRowIndex = [...new Set(xLine_0)].reduce(function(s, a_1) {
			s.push({ thread: a_1 });
			return s;
		}, []).sort((a_2, b_1) => a_2.thread > b_1.thread ? 1 : -1);
		const concatIndex = timeline + "." + subThread;
		const results_0 = sortedRowIndex.map((v, index) => ({
			...v,
			sortedRowIndex: index
		})).filter(function(entry) {
			return entry.thread === concatIndex;
		});
		return (results_0[0] && results_0[0].sortedRowIndex * 50) - topMargin;
	}, [data, topMargin]);
	const plotY = useCallback((item_19) => {
		const plotDate_0 = [item_19];
		let demoDates_2 = [];
		dataConvertedDate && dataConvertedDate.map((item_20) => {
			demoDates_2.push(item_20.date);
		});
		let demoDatesTwo_0 = [];
		dataConvertedDate && filteredByDate.map((item_21) => {
			demoDatesTwo_0.push(item_21.date);
		});
		let unique_4 = [...new Set(demoDatesTwo_0)];
		const mappedToObjects_2 = unique_4.map((date_9) => new Date(date_9)).sort((a_3, b_2) => a_3.getTime() - b_2.getTime()).map((date_10) => date_10.toLocaleDateString()).map(function(value_2) {
			return { date: value_2 };
		});
		const plots_7 = [];
		for (let i_7 = 1; i_7 <= unique_4.length; i_7++) plots_7.push(i_7);
		let mergePlots_2 = mappedToObjects_2.map((o_2, i_8) => ({
			...o_2,
			plots: plots_7[i_8] || null
		}));
		const res_0 = mergePlots_2 && mergePlots_2.filter(({ date: date_11 }) => plotDate_0.includes(date_11)).map(({ plots: plots_8 }) => plots_8);
		return (mergePlots_2 && res_0.map((item_22) => {
			return item_22;
		})) * getYScale() - getYScale() + (getYScale() === 130 ? 32 : 8);
	}, [
		dataConvertedDate,
		getYScale,
		filteredByDate
	]);
	const plotX = useCallback((timeline_0, subThread_0) => {
		const xLine_1 = data && filteredByDate.map((item_23) => {
			return item_23.timeline + "." + item_23.subThread;
		});
		const rowIndex_0 = [...new Set(xLine_1)].reduce(function(s_0, a_4) {
			s_0.push({ thread: a_4 });
			return s_0;
		}, []);
		const orderByThread = (unordered) => {
			let maxElement = 0;
			unordered.forEach((value_3) => {
				if (value_3.thread.split(".")[0] > maxElement) maxElement = value_3.thread.split(".")[0];
			});
			let sortArray = [...Array(+maxElement)].map((e) => e = []);
			unordered.forEach((value_4) => {
				sortArray[+value_4.thread.split(".")[0] - 1].push(value_4);
			});
			sortArray.forEach((value_5) => {
				value_5.sort((a_5, b_3) => {
					return +a_5.thread.split(".")[1] - +b_3.thread.split(".")[1];
				});
			});
			return sortArray.flat();
		};
		const sortedRowIndex_0 = orderByThread(rowIndex_0);
		const concatIndex_0 = timeline_0 + "." + subThread_0;
		const results_2 = sortedRowIndex_0.map((v_0, index_0) => ({
			...v_0,
			sortedRowIndex: index_0
		})).filter(function(entry_0) {
			return entry_0.thread === concatIndex_0;
		});
		return (results_2[0] && results_2[0].sortedRowIndex * getXScale()) + topMargin;
	}, [
		data,
		getXScale,
		topMargin,
		filteredByDate
	]);
	const MONTHS = {
		1: "Jan",
		2: "Feb",
		3: "March",
		4: "Apr",
		5: "May",
		6: "June",
		7: "July",
		8: "Aug",
		9: "Sept",
		10: "Oct",
		11: "Nov",
		12: "Dec"
	};
	const convertNumberToMonths = (months) => {
		const orderedMonths = months;
		orderedMonths.sort(function(a_6, b_4) {
			return a_6 - b_4;
		});
		return orderedMonths.map(function(i_9) {
			return MONTHS[i_9];
		});
	};
	function lastDayOfMonthArray(object_0) {
		let tempDates = [];
		let dates_0 = [];
		object_0.forEach((obj_0) => {
			if (!tempDates.find((date_12) => date_12 === formatDate(obj_0.date))) tempDates.push(formatDate(obj_0.date));
		});
		tempDates.forEach((date_13) => {
			const dateMonth = Number(date_13.split("/")[0]);
			const dateYear = Number(date_13.split("/")[2]);
			let pushDate = "12/31/9999";
			tempDates.forEach((fDate) => {
				const fDateMonth = Number(fDate.split("/")[0]);
				const fDateDay = Number(fDate.split("/")[1]);
				if (Number(fDate.split("/")[2]) === dateYear && fDateMonth === dateMonth && fDateDay < Number(pushDate.split("/")[1])) pushDate = fDate;
			});
			if (pushDate !== "12/31/9999") dates_0.push(pushDate);
		});
		dates_0 = [...new Set(dates_0)];
		return dates_0.map((date_14) => {
			let timelines = [];
			let subThreads = [];
			object_0.forEach((obj_1) => {
				if (formatDate(obj_1.date) === formatDate(date_14)) {
					timelines.push(obj_1.timeline);
					subThreads.push(obj_1.subThread);
				}
			});
			return {
				date: date_14,
				timelines,
				subThread: subThreads
			};
		});
	}
	useEffect(() => {
		const timelineSet = /* @__PURE__ */ new Set();
		data && data.forEach((item_24) => {
			const timelineKey = `${item_24.timeline}-${item_24.subThread}`;
			timelineSet.add(timelineKey);
		});
		setUniqueTimelines(timelineSet.size);
	}, [data]);
	function firstDayOfYearArray(object_2) {
		let tempDates_1 = [];
		let dates_2 = [];
		object_2.forEach((obj_4) => {
			if (!tempDates_1.find((date_18) => date_18 === formatDate(obj_4.date))) tempDates_1.push(formatDate(obj_4.date));
		});
		tempDates_1.forEach((date_19) => {
			const dateMonth_1 = Number(date_19.split("/")[0]);
			const dateYear_1 = Number(date_19.split("/")[2]);
			let pushDate_1 = "12/31/9999";
			tempDates_1.forEach((fDate_1) => {
				const fDateMonth_1 = Number(fDate_1.split("/")[0]);
				const fDateDay_1 = Number(fDate_1.split("/")[1]);
				if (Number(fDate_1.split("/")[2]) === dateYear_1 && fDateMonth_1 === dateMonth_1 && fDateDay_1 < Number(pushDate_1.split("/")[1])) pushDate_1 = fDate_1;
			});
			if (pushDate_1 !== "12/31/9999") dates_2.push(pushDate_1);
		});
		dates_2 = [...new Set(dates_2)];
		dates_2.sort((a_8, b_6) => new Date(b_6) - new Date(a_8));
		let dateArr_0 = [];
		for (let x_0 = 0; x_0 < dates_2.length; x_0++) if (x_0 === dates_2.length - 1 || Number(dates_2[x_0].split("/")[2]) !== Number(dates_2[x_0 + 1].split("/")[2])) dateArr_0.push(dates_2[x_0]);
		dateArr_0.sort((a_9, b_7) => new Date(a_9) - new Date(b_7));
		return dateArr_0.map((date_20) => {
			let timelines_1 = [];
			let subThreads_1 = [];
			object_2.forEach((obj_5) => {
				if (formatDate(obj_5.date) === formatDate(date_20)) {
					timelines_1.push(obj_5.timeline);
					subThreads_1.push(obj_5.subThread);
				}
			});
			return {
				date: date_20,
				timelines: timelines_1,
				subThread: subThreads_1
			};
		});
	}
	const Today = (object_3) => {
		const dateList_0 = [];
		object_3 && object_3.map((item_25) => {
			dateList_0.push(item_25.date);
		});
		let unique_6 = [...new Set(dateList_0)];
		const today = (/* @__PURE__ */ new Date()).toLocaleDateString("en-US");
		return unique_6.filter((date_21) => date_21.includes(today));
	};
	const getInverseProportionalNumber = (inputNumber) => {
		const reciprocal = 1 / inputNumber;
		return Math.round(reciprocal * 400);
	};
	const visualizationSmall = 10;
	const rangeHandles = 18;
	const adjusterHeight = 100;
	const GuideLinesShort = () => {
		return buildCategoryLines().map((item_26, index_1) => {
			return /* @__PURE__ */ React.createElement("div", {
				key: index_1,
				style: {
					position: "absolute",
					zIndex: 0,
					top: 186 * index_1
				}
			}, /* @__PURE__ */ React.createElement("div", {
				className: classes.horizontalDash,
				style: { height: threadHeight }
			}), /* @__PURE__ */ React.createElement("div", { style: {
				width: filteredByDate && uniqueNodeScaleAmount * getXScale() + getXScale(),
				height: threadHeight,
				borderBottom: `${theme.palette.divider} 1px solid`
			} }));
		});
	};
	const preloadArray = [...Array(7).keys()];
	const VisualizationCard = ({ title, data: data_0, date: date_22, user }) => {
		return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, " ", title, " "), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " ", data_0, " ")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " ", date_22, " ")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " ", user, " ")));
	};
	const VisualizationCardMulti = ({ title: title_0, data: data_1, date: date_23, user: user_0 }) => {
		return /* @__PURE__ */ React.createElement("div", { style: {
			width: 130,
			borderRadius: 4,
			marginBottom: 16,
			padding: 8
		} }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, " ", title_0, " ")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " ", data_1, " ")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " ", date_23, " ")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " ", user_0, " ")));
	};
	const categoryList = [];
	data && filteredByDate.map((item_27) => {
		categoryList.push({
			label: item_27.timelineCategoryName,
			color: item_27.color,
			timeline: item_27.timeline
		});
	});
	const uniqueCategoryLegendSorted = [...new Map(categoryList.map((item_28) => [item_28["label"], item_28])).values()].sort((a_10, b_8) => a_10.timeline > b_8.timeline ? 1 : -1);
	const LegendDot = ({ background }) => {
		return /* @__PURE__ */ React.createElement("div", { style: {
			width: 30,
			height: 15,
			background: lighten(background, .5),
			borderRadius: theme.spacing(6)
		} });
	};
	const LegendItem = ({ label, color }) => {
		return /* @__PURE__ */ React.createElement("div", { style: {
			display: "flex",
			alignItems: "center"
		} }, /* @__PURE__ */ React.createElement(LegendDot, { background: "#" + color }), /* @__PURE__ */ React.createElement("div", { style: { marginLeft: theme.spacing(1) } }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, label, " ")));
	};
	const legend = data && uniqueCategoryLegendSorted.map((item_29, index_2) => {
		return /* @__PURE__ */ React.createElement(LegendItem, {
			key: index_2,
			color: item_29.color,
			label: item_29.label
		});
	});
	const plotCategoryBar = (timelineNumber, subThread_1) => {
		const xLine_2 = data && filteredByDate.map((item_30) => {
			return item_30.timeline.toString() + "." + item_30.subThread.toString();
		});
		const rowIndex_1 = [...new Set(xLine_2)].sort(function(a_11, b_9) {
			return a_11.localeCompare(b_9);
		}).reduce(function(s_1, a_12) {
			s_1.push({ thread: a_12 });
			return s_1;
		}, []);
		const concatIndex_1 = timelineNumber + "." + subThread_1;
		const results_3 = rowIndex_1.map((v_1, index_3) => ({
			...v_1,
			rowIndex: index_3 + 1
		})).filter(function(entry_1) {
			return entry_1.thread === concatIndex_1;
		});
		return (results_3[0] && results_3[0].rowIndex * getXScale()) - getXScale();
	};
	const CategoryBar = ({ label: label_0, height }) => {
		return /* @__PURE__ */ React.createElement("div", {
			className: classes.categoryBar,
			style: { height }
		}, /* @__PURE__ */ React.createElement("div", { className: classes.categoryLabel }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, " ", label_0, " ")));
	};
	const DateMarkers = /* @__PURE__ */ React.createElement("div", null, filteredByDate && showYearMarkers && uniqueNodeScaleAmount >= summaryBreakpoint && firstDayOfYearArray(filteredByDate).map((item_31, index_4) => {
		return /* @__PURE__ */ React.createElement("div", {
			key: index_4,
			style: {
				position: "absolute",
				bottom: 0,
				left: plotY(item_31.date)
			}
		}, /* @__PURE__ */ React.createElement(MttYearTag, { year: true }, item_31.date.split("/")[2]));
	}), filteredByDate && uniqueNodeScaleAmount >= summaryBreakpoint && showMonthMarkers && lastDayOfMonthArray(filteredByDate).map((item_32, index_5) => {
		return /* @__PURE__ */ React.createElement("div", {
			key: index_5,
			style: {
				position: "absolute",
				bottom: 0,
				left: plotY(item_32.date)
			}
		}, /* @__PURE__ */ React.createElement(MttYearTag, null, convertNumberToMonths([item_32.date.split("/")[0]])));
	}), filteredByDate && uniqueNodeScaleAmount >= summaryBreakpoint && Today(filteredByDate).map((item_33) => {
		return /* @__PURE__ */ React.createElement("div", { style: {
			position: "absolute",
			bottom: 0,
			left: plotY(item_33)
		} }, /* @__PURE__ */ React.createElement(MttYearTag, {
			year: true,
			today: true
		}, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " TODAY ")));
	}));
	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
		ref: mainContainer,
		style: {
			position: "relative",
			height: "75vh",
			overflow: "scroll"
		}
	}, !loading && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: {
		zIndex: 99999999,
		position: "absolute",
		bottom: 0
	} }, DateMarkers), data && data && uniqueNodeScaleAmount < summaryBreakpoint && filteredByDate.map((item_34, index_6) => {
		return /* @__PURE__ */ React.createElement("div", {
			key: index_6,
			className: classes.categoryBarPlacement,
			style: { top: plotCategoryBar(Number(item_34.timeline), Number(item_34.subThread)) + 0 }
		}, /* @__PURE__ */ React.createElement(CategoryBar, {
			key: item_34.id,
			label: item_34.timelineCategoryName,
			height: data && getXScale()
		}));
	}), data && filteredByDate.map((item_35, index_7) => {
		return item_35.dates.length === 1 ? /* @__PURE__ */ React.createElement("div", {
			key: index_7,
			style: {
				position: "absolute",
				left: plotY(new Date(item_35.date).toLocaleDateString("en-US")),
				top: plotX(item_35.timeline, item_35.subThread),
				zIndex: 999999 - plotY(new Date(item_35.date).toLocaleDateString("en-US")) - item_35.subThread
			}
		}, /* @__PURE__ */ React.createElement(TimelineNode, {
			icon: /* @__PURE__ */ React.createElement(IconRenderer, {
				noBorder: true,
				value: {
					color: { hex: "#" + item_35.color },
					name: item_35.iconID
				}
			}),
			dot: data && uniqueNodeScaleAmount <= overviewBreakpoint,
			dotColor: "#" + item_35.color,
			data: item_35.dates,
			details: data && uniqueNodeScaleAmount < summaryBreakpoint,
			height: data && uniqueNodeScaleAmount <= summaryBreakpoint && 183 || data && uniqueNodeScaleAmount <= overviewBreakpoint && 30,
			width: data && uniqueNodeScaleAmount < summaryBreakpoint && 130,
			boxStyle: true,
			show: showAllDetails,
			iconColor: "#" + item_35.color
		})) : /* @__PURE__ */ React.createElement("div", { key: item_35.id }, /* @__PURE__ */ React.createElement("div", { style: {
			position: "absolute",
			left: plotY(new Date(item_35.date).toLocaleDateString("en-US")) + 4,
			top: plotX(item_35.timeline, item_35.subThread),
			zIndex: 999999 - plotY(new Date(item_35.date).toLocaleDateString("en-US")) - item_35.timeline
		} }, /* @__PURE__ */ React.createElement(MultiDot, {
			map: item_35.dates,
			number: item_35.dates.length
		})));
	}), /* @__PURE__ */ React.createElement(Fade, { in: data && uniqueNodeScaleAmount >= summaryBreakpoint }, /* @__PURE__ */ React.createElement("div", null, data && minnifiedResult.map((item_36, index_8) => {
		return /* @__PURE__ */ React.createElement("div", {
			key: index_8,
			style: {
				position: "absolute",
				left: plotY(item_36.firstDate) + 2,
				top: data && uniqueNodeScaleAmount > overviewBreakpoint ? 14 + plotX(item_36.timeline, item_36.subThread) : 4 + plotX(item_36.timeline, item_36.subThread)
			}
		}, /* @__PURE__ */ React.createElement(TimelineWrapper, {
			timeline: item_36.timeline,
			style: {
				width: plotY(item_36.lastDate) - plotY(item_36.firstDate) + 45,
				height: data && uniqueNodeScaleAmount > overviewBreakpoint ? 20 : 40,
				backgroundColor: lighten("#" + item_36.color, .7)
			}
		}));
	}))), data && uniqueNodeScaleAmount < summaryBreakpoint && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(GuideLinesShort, null)))), /* @__PURE__ */ React.createElement("div", { style: { width: 250 } }, /* @__PURE__ */ React.createElement(HeightAdjuster, {
		verticalAdjuster,
		setVerticalAdjuster
	})), !loading && /* @__PURE__ */ React.createElement("div", { style: {
		position: "relative",
		borderTop: "1px solid lightgrey",
		overflow: "scroll"
	} }, /* @__PURE__ */ React.createElement("div", null, data && displayRangeFilter && /* @__PURE__ */ React.createElement("div", { style: { overflow: "scroll" } }, /* @__PURE__ */ React.createElement("div", { key: data }, /* @__PURE__ */ React.createElement(DynamicRangeSlider, {
		id: "range-slider",
		step: 10,
		threads: 10 * uniqueTimelines,
		width: containerWidth - rangeHandles,
		margin: topMargin + getInverseProportionalNumber(verticalAdjuster) * 3,
		defaultValue: [10, unique.length * 10],
		max: unique.length * 10,
		min: 10,
		onThumbDragEnd: processRangeValues,
		onRangeDragEnd: processRangeValues,
		onInput: (e_0) => getRangeValues(e_0)
	}))), /* @__PURE__ */ React.createElement("div", null, data && data.map((item_37, index_9) => {
		return item_37.dates.length === 1 ? /* @__PURE__ */ React.createElement("div", {
			key: index_9,
			style: {
				position: "absolute",
				left: dataConvertedDate && plotYV(new Date(item_37.date).toLocaleDateString("en-US")) * (containerWidth / unique.length) - (visualizationSmall + rangeHandles),
				top: plotXV(item_37.timeline, item_37.subThread) / verticalAdjuster + visualizationYScale + adjusterHeight
			}
		}, /* @__PURE__ */ React.createElement(VisualizationDot, {
			type: item_37.dates[0].details.shortDescription,
			hover: /* @__PURE__ */ React.createElement(VisualizationCard, {
				title: item_37.dates[0].details.shortDescription,
				data: item_37.dates[0].details.data1,
				date: item_37.dates[0].details.date
			})
		})) : /* @__PURE__ */ React.createElement("div", { key: item_37.id }, /* @__PURE__ */ React.createElement("div", { style: {
			position: "absolute",
			left: dataConvertedDate && plotYV(new Date(item_37.date).toLocaleDateString("en-US")) * (containerWidth / unique.length) - (visualizationSmall + rangeHandles),
			top: plotXV(item_37.timeline, item_37.subThread) / verticalAdjuster + visualizationYScale + adjusterHeight
		} }, /* @__PURE__ */ React.createElement(VisualizationDot, {
			hover: /* @__PURE__ */ React.createElement("div", { style: { color: "black" } }, item_37.dates.map((item_38) => {
				return /* @__PURE__ */ React.createElement(VisualizationCardMulti, {
					title: item_38.details.description,
					date: item_38.details.date,
					key: item_38.id
				});
			})),
			multi: true
		}, item_37.dates.length)));
	})))), /* @__PURE__ */ React.createElement("div", { style: {
		position: "absolute",
		top: 0,
		left: 0,
		zIndex: 10
	} }, loading && preloadArray.map((item_39, index_10) => {
		return /* @__PURE__ */ React.createElement("div", {
			key: index_10,
			style: {
				position: "absolute",
				left: Math.floor(Math.random() * 11) * 60 + 40,
				top: (index_10 + 1) * 80
			}
		}, /* @__PURE__ */ React.createElement(TimelinePreloaderNode, {
			longView: true,
			loading
		}));
	})), uniqueNodeScaleAmount >= summaryBreakpoint && /* @__PURE__ */ React.createElement("div", { style: {
		position: "absolute",
		right: 0,
		top: 0,
		zIndex: 999999999,
		background: "white",
		borderRadius: 4
	} }, /* @__PURE__ */ React.createElement("div", { style: {
		display: "flex",
		padding: theme.spacing(1),
		gap: theme.spacing(3)
	} }, legend, /* @__PURE__ */ React.createElement(Button, {
		className: classes.button,
		onClick: () => setShowMonthMarkers(!showMonthMarkers)
	}, /* @__PURE__ */ React.createElement("span", { style: { textDecoration: !showMonthMarkers && "line-through" } }, "M")), /* @__PURE__ */ React.createElement(Button, {
		className: classes.button,
		onClick: () => setShowYearMarkers(!showYearMarkers)
	}, /* @__PURE__ */ React.createElement("span", { style: { textDecoration: !showYearMarkers && "line-through" } }, "Y")))));
});
//#endregion
export { MttTimeline };

//# sourceMappingURL=MttTimeline.mjs.map