import { FluentIcon } from "../../../utilities/iconLibrary/FluentIcon.mjs";
import React, { createRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Badge, ButtonBase, IconButton, MenuItem, Popover, Typography, makeStyles } from "@material-ui/core";
import clsx from "clsx";
import { MoreVerticalIcon } from "@fluentui/react-icons";
//#region src/UI/navigation/tabs/UdpTabs.jsx
const useStyles = makeStyles((theme) => ({
	root: {
		flexSkrink: 0,
		overflow: "hidden"
	},
	tabsWrapper: {
		display: "flex",
		gap: (props) => props?.variant === "block" ? theme.spacing(1) : null,
		flexGrow: 1
	},
	tab: {
		padding: `8px 18px`,
		flex: 1
	},
	blockTab: { backgroundColor: theme.palette.background.paper },
	activeTab: {
		borderBottom: (props) => props?.variant === "block" ? null : `2px solid ${theme.palette.secondary.main}`,
		backgroundColor: (props) => props?.variant === "block" ? theme.palette.secondary.light : null,
		color: (props) => props?.variant === "block" ? theme.palette.getContrastText(theme.palette.secondary.light) : null
	},
	moreButton: {
		marginTop: theme.spacing(1),
		width: theme.spacing(1),
		height: theme.spacing(1),
		borderRadius: 2
	},
	menuItem: {
		whiteSpace: "normal",
		width: (props) => props?.menuWidth ? props?.menuWidth : "170px"
	},
	popoverWrapper: { maxHeight: (props) => props?.menuMaxHeight ? props?.menuMaxHeight : "250px" }
}));
const UdpTabs = (props) => {
	const { value, onChange, className, menuItemProps, tabList, variant, buttonWidth } = props;
	const classes = useStyles(props);
	const tabContainerRef = useRef(null);
	const innerTabContainerRef = useRef(null);
	const [anchorEl, setAnchorEl] = useState(null);
	const [visibleTabList, setVisibleTabList] = useState(null);
	const [menuTabList, setMenuTabList] = useState(null);
	const [initialTotalTabWidth, setInitialTotalTabWidth] = useState(null);
	const [initialTabWidth, setInitialTabWidth] = useState();
	const gapWidth = 8;
	const open = Boolean(anchorEl);
	const currentTabList = useMemo(() => {
		return tabList?.map((tab, index) => ({
			id: index,
			...tab,
			ref: createRef()
		}));
	}, [tabList]);
	const handlePopoverClick = useCallback((event, index_0) => {
		setAnchorEl(event.currentTarget);
	}, []);
	const handlePopoverClose = () => {
		setAnchorEl(null);
	};
	const menuItemSelected = useMemo(() => {
		return !!menuTabList?.find((tab_0) => tab_0?.id === value);
	}, [value, menuTabList]);
	const getInitialTabWidth = useCallback((tabsElements, currentTabList_0) => {
		let totalTabWidth = 0;
		let tabWidth = [];
		if (tabsElements?.length === currentTabList_0?.length && !initialTotalTabWidth) {
			for (let i = 0; i < tabsElements.length; i++) {
				totalTabWidth += tabsElements[i].clientWidth;
				if (variant === "block") totalTabWidth += gapWidth;
				tabWidth[i] = tabsElements[i].clientWidth;
			}
			setInitialTotalTabWidth(totalTabWidth);
			setInitialTabWidth(tabWidth);
			return {
				totalTabWidth,
				tabWidth
			};
		}
		return {
			totalTabWidth: initialTotalTabWidth,
			tabWidth: initialTabWidth
		};
	}, [
		initialTabWidth,
		initialTotalTabWidth,
		variant
	]);
	const calculateHiddenTabs = useCallback(() => {
		if (innerTabContainerRef.current) {
			const containerWidth = innerTabContainerRef.current.clientWidth;
			const tabsElements_0 = Array.from(innerTabContainerRef.current.children);
			const moreBtnWidth = 24;
			let hiddenTabsArray = [];
			let visibleTabsArray = Array.from(currentTabList);
			const { totalTabWidth: totalTabWidth_0, tabWidth: tabWidth_0 } = getInitialTabWidth(tabsElements_0, currentTabList);
			if (totalTabWidth_0 > containerWidth) {
				let accumulatedWidth = 0;
				for (let i_0 = 0; i_0 < tabWidth_0?.length; i_0++) {
					accumulatedWidth += tabWidth_0[i_0];
					if (variant === "block") accumulatedWidth += gapWidth;
					if (accumulatedWidth > containerWidth - moreBtnWidth) {
						hiddenTabsArray = Array.from(currentTabList).slice(i_0);
						visibleTabsArray = Array.from(currentTabList).slice(0, i_0);
						break;
					}
				}
			}
			setVisibleTabList(visibleTabsArray);
			setMenuTabList(hiddenTabsArray);
		}
	}, [
		currentTabList,
		getInitialTabWidth,
		variant
	]);
	useEffect(() => {
		setVisibleTabList(currentTabList);
	}, [currentTabList]);
	useEffect(() => {
		calculateHiddenTabs();
		const observer = new ResizeObserver((entries) => {
			handlePopoverClose();
			calculateHiddenTabs();
		});
		if (tabContainerRef.current) observer.observe(tabContainerRef.current);
		return () => {
			observer.disconnect();
		};
	}, [calculateHiddenTabs]);
	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
		className: clsx(classes.root, className),
		ref: tabContainerRef
	}, /* @__PURE__ */ React.createElement("div", {
		className: classes.tabsWrapper,
		ref: innerTabContainerRef,
		style: variant === "spread" ? { justifyContent: "space-between" } : null
	}, visibleTabList?.map((item, index_1) => /* @__PURE__ */ React.createElement(ButtonBase, {
		style: {
			flex: variant === "spread" && 1,
			width: !!buttonWidth && buttonWidth
		},
		key: index_1,
		id: "udpRecord-UdpTabs-MenuItem-" + item?.label?.replace(/ /g, "-"),
		udprecordid: "udpRecord-UdpTabs-MenuItem-" + item?.label?.replace(/ /g, "-")
	}, /* @__PURE__ */ React.createElement("div", {
		className: clsx(classes.tab, {
			[classes.blockTab]: variant === "block",
			[classes.activeTab]: value === item?.id
		}),
		onClick: (e) => {
			onChange(e, item?.id);
			if (item?.onClick) item.onClick();
			setAnchorEl(null);
		}
	}, /* @__PURE__ */ React.createElement(Typography, {
		noWrap: true,
		style: { fontWeight: variant === "spread" ? "bold" : "normal" }
	}, item?.label)))), menuTabList?.length > 0 && /* @__PURE__ */ React.createElement(IconButton, {
		onClick: handlePopoverClick,
		className: classes.moreButton,
		color: "primary",
		id: "udpRecord-UdpTabs-MoreActions",
		udprecordid: "udpRecord-UdpTabs-MoreActions"
	}, /* @__PURE__ */ React.createElement(Badge, {
		color: "secondary",
		variant: "dot",
		invisible: menuItemSelected === false
	}, /* @__PURE__ */ React.createElement(FluentIcon, {
		component: MoreVerticalIcon,
		size: "medium"
	})))), !!menuTabList?.length && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Popover, {
		id: "menuTabList",
		open,
		anchorEl,
		onClose: handlePopoverClose,
		anchorOrigin: {
			vertical: "bottom",
			horizontal: "left"
		},
		transformOrigin: {
			vertical: "top",
			horizontal: "left"
		},
		className: classes.popoverWrapper
	}, menuTabList?.map((tab_1) => {
		return /* @__PURE__ */ React.createElement(MenuItem, {
			key: tab_1?.id,
			id: "udpRecord-UdpTabs-MenuItem-" + tab_1?.label?.replace(/ /g, "-"),
			udprecordid: "udpRecord-UdpTabs-MenuItem-" + tab_1?.label?.replace(/ /g, "-"),
			onClick: (e_0) => {
				if (tab_1?.onClick) tab_1.onClick();
				if (onChange) onChange(e_0, tab_1?.id);
				setAnchorEl(null);
			},
			className: clsx(classes.menuItem, className),
			selected: tab_1?.id === value,
			...menuItemProps
		}, /* @__PURE__ */ React.createElement(Typography, null, tab_1?.label));
	})))));
};
//#endregion
export { UdpTabs };

//# sourceMappingURL=UdpTabs.mjs.map