import { FluentIcon } from "./FluentIcon.mjs";
import { unityIcons } from "./UnityIconLibrary.mjs";
import { fluentLibraryIcons } from "../../assets/unityIcons/LibraryData.mjs";
import FluentIconKey_default from "../../UI/dataDisplay/map/FluentIconKey.mjs";
import SelectedLibraryItem from "./SelectedLibraryItem.mjs";
import { c } from "react-compiler-runtime";
import React, { memo, useEffect, useState } from "react";
import { Divider, Fade, InputAdornment, TextField, makeStyles } from "@material-ui/core";
import { SearchIcon } from "@fluentui/react-icons";
import { debounce } from "lodash-es";
import InfiniteScroll from "react-infinite-scroll-component";
//#region src/utilities/iconLibrary/IconLibrary.jsx
const useStyles = makeStyles((theme) => ({
	root: {
		display: "flex",
		flexDirection: "row",
		paddingLeft: theme.spacing(2),
		paddingRight: theme.spacing(2),
		height: 400
	},
	divider: {
		marginLeft: theme.spacing(2),
		marginRight: theme.spacing(2),
		height: 400
	},
	selection: {
		display: "flex",
		flexDirection: "row"
	},
	search: {
		marginLeft: theme.spacing(2),
		width: 312
	},
	iconsContainer: {
		minWidth: "76%",
		overflow: "auto"
	},
	input: { height: 34 },
	formTextInput: { fontSize: 13 },
	labelRoot: { fontSize: 13 }
}));
const IconLibrary = (props) => {
	const $ = c(50);
	const { addItem, title, selectedIconName } = props;
	const classes = useStyles();
	const [selectedIcon, setSelectedIcon] = useState(fluentLibraryIcons[0]);
	let t0;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t0 = [];
		$[0] = t0;
	} else t0 = $[0];
	const [filteredFluentIcons, setFilteredFluentIcons] = useState(t0);
	let t1;
	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
		t1 = [];
		$[1] = t1;
	} else t1 = $[1];
	const [icons, setIcons] = useState(t1);
	const [hasMoreToScroll, setHasMoreToScroll] = useState(true);
	const [searchValue, setSearchValue] = useState("");
	let t2;
	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
		t2 = (item) => {
			setSelectedIcon(item);
		};
		$[2] = t2;
	} else t2 = $[2];
	const selectItem = t2;
	let t3;
	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
		t3 = fluentLibraryIcons.concat(unityIcons);
		$[3] = t3;
	} else t3 = $[3];
	const combinedLibraryIcons = t3;
	let t4;
	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
		t4 = combinedLibraryIcons.reduce((iconList, item_0) => {
			const iconObj = {
				id: item_0.id,
				label: item_0.label,
				icon: /* @__PURE__ */ React.createElement(FluentIconKey_default, {
					key: item_0.id,
					icon: item_0.icon,
					tooltip: item_0.label,
					select: () => selectItem(item_0),
					iconType: item_0.type
				})
			};
			iconList.push(iconObj);
			return iconList;
		}, []);
		$[4] = t4;
	} else t4 = $[4];
	const iconListObj = t4;
	let t5;
	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
		t5 = (value) => {
			let icons_0;
			if (!value) icons_0 = iconListObj.map(_temp);
			else icons_0 = iconListObj.filter((item_2) => item_2.label.toLowerCase().includes(value)).map(_temp2);
			setFilteredFluentIcons(icons_0);
		};
		$[5] = t5;
	} else t5 = $[5];
	const getSearchableIcons = t5;
	let t6;
	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
		t6 = (event) => {
			const value_0 = event.target.value;
			setSearchValue(value_0);
			debounce((value_1) => {
				getSearchableIcons(value_1);
			}, 200)(value_0);
		};
		$[6] = t6;
	} else t6 = $[6];
	const handleFluentIconSearch = t6;
	let t7;
	if ($[7] !== filteredFluentIcons || $[8] !== icons) {
		t7 = () => {
			if (filteredFluentIcons.length <= icons.length) {
				setHasMoreToScroll(false);
				return;
			}
			setIcons([...icons].concat(filteredFluentIcons.slice(icons.length, icons.length + 30)));
		};
		$[7] = filteredFluentIcons;
		$[8] = icons;
		$[9] = t7;
	} else t7 = $[9];
	const fetchMoreIcons = t7;
	let t8;
	let t9;
	if ($[10] !== filteredFluentIcons) {
		t8 = () => {
			setIcons(filteredFluentIcons.slice(0, 150));
			setHasMoreToScroll(filteredFluentIcons.length > 150);
		};
		t9 = [filteredFluentIcons];
		$[10] = filteredFluentIcons;
		$[11] = t8;
		$[12] = t9;
	} else {
		t8 = $[11];
		t9 = $[12];
	}
	useEffect(t8, t9);
	let t10;
	let t11;
	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
		t10 = () => {
			getSearchableIcons();
		};
		t11 = [getSearchableIcons];
		$[13] = t10;
		$[14] = t11;
	} else {
		t10 = $[13];
		t11 = $[14];
	}
	useEffect(t10, t11);
	let t12;
	let t13;
	if ($[15] !== selectedIconName) {
		t12 = () => {
			setSelectedIcon(combinedLibraryIcons.find((icon) => icon.id === selectedIconName));
		};
		t13 = [combinedLibraryIcons, selectedIconName];
		$[15] = selectedIconName;
		$[16] = t12;
		$[17] = t13;
	} else {
		t12 = $[16];
		t13 = $[17];
	}
	useEffect(t12, t13);
	let t14;
	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
		t14 = /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(FluentIcon, { component: SearchIcon }));
		$[18] = t14;
	} else t14 = $[18];
	let t15;
	if ($[19] !== classes.formTextInput || $[20] !== classes.input) {
		t15 = {
			startAdornment: t14,
			classes: {
				root: classes.input,
				input: classes.formTextInput
			}
		};
		$[19] = classes.formTextInput;
		$[20] = classes.input;
		$[21] = t15;
	} else t15 = $[21];
	let t16;
	if ($[22] !== classes.labelRoot) {
		t16 = { classes: { root: classes.labelRoot } };
		$[22] = classes.labelRoot;
		$[23] = t16;
	} else t16 = $[23];
	let t17;
	if ($[24] !== classes.search || $[25] !== searchValue || $[26] !== t15 || $[27] !== t16) {
		t17 = /* @__PURE__ */ React.createElement(TextField, {
			className: classes.search,
			id: "search",
			placeholder: "Search icons",
			variant: "outlined",
			margin: "normal",
			size: "small",
			value: searchValue,
			onChange: handleFluentIconSearch,
			InputProps: t15,
			InputLabelProps: t16
		});
		$[24] = classes.search;
		$[25] = searchValue;
		$[26] = t15;
		$[27] = t16;
		$[28] = t17;
	} else t17 = $[28];
	let t18;
	if ($[29] !== classes.iconsContainer || $[30] !== icons) {
		t18 = /* @__PURE__ */ React.createElement("div", {
			className: classes.iconsContainer,
			id: "scrollableDiv"
		}, icons);
		$[29] = classes.iconsContainer;
		$[30] = icons;
		$[31] = t18;
	} else t18 = $[31];
	let t19;
	if ($[32] !== addItem || $[33] !== classes.divider || $[34] !== classes.selection || $[35] !== selectedIcon || $[36] !== title) {
		t19 = selectedIcon && /* @__PURE__ */ React.createElement("div", { className: classes.selection }, /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" })), selectedIcon && /* @__PURE__ */ React.createElement(Fade, { in: selectedIcon }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(SelectedLibraryItem, {
			addItem,
			item: selectedIcon,
			title
		}))));
		$[32] = addItem;
		$[33] = classes.divider;
		$[34] = classes.selection;
		$[35] = selectedIcon;
		$[36] = title;
		$[37] = t19;
	} else t19 = $[37];
	let t20;
	if ($[38] !== classes.root || $[39] !== t18 || $[40] !== t19) {
		t20 = /* @__PURE__ */ React.createElement("div", { className: classes.root }, t18, t19);
		$[38] = classes.root;
		$[39] = t18;
		$[40] = t19;
		$[41] = t20;
	} else t20 = $[41];
	let t21;
	if ($[42] !== fetchMoreIcons || $[43] !== hasMoreToScroll || $[44] !== icons.length || $[45] !== t20) {
		t21 = /* @__PURE__ */ React.createElement(InfiniteScroll, {
			dataLength: icons.length,
			next: fetchMoreIcons,
			hasMore: hasMoreToScroll,
			scrollableTarget: "scrollableDiv"
		}, t20);
		$[42] = fetchMoreIcons;
		$[43] = hasMoreToScroll;
		$[44] = icons.length;
		$[45] = t20;
		$[46] = t21;
	} else t21 = $[46];
	let t22;
	if ($[47] !== t17 || $[48] !== t21) {
		t22 = /* @__PURE__ */ React.createElement(React.Fragment, null, t17, t21);
		$[47] = t17;
		$[48] = t21;
		$[49] = t22;
	} else t22 = $[49];
	return t22;
};
var IconLibrary_default = memo(IconLibrary);
function _temp(item_1) {
	return item_1.icon;
}
function _temp2(item_3) {
	return item_3.icon;
}
//#endregion
export { IconLibrary_default as default };

//# sourceMappingURL=IconLibrary.mjs.map