import { FluentIcon } from "../../../../utilities/iconLibrary/FluentIcon.mjs";
import PrimaryActionButton from "../../../inputs/buttons/PrimaryActionButton.mjs";
import { AmbientTextField } from "../../../inputs/textField/AmbientTextField.mjs";
import { AmbientTokenButton } from "../../../inputs/buttons/AmbientTokenButton.mjs";
import { AmbientChipButton } from "../../../inputs/buttons/AmbientChipButton.mjs";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { InputAdornment, MenuItem, Popover, Typography, makeStyles } from "@material-ui/core";
import { AppIconDefaultIcon, BlockedIcon, BulletedTreeListIcon, CombineIcon, ExportIcon, FavoriteStarIcon, FilterIcon, LightbulbIcon, MoreVerticalIcon, SaveIcon, SearchIcon, TripleColumnIcon, UploadIcon } from "@fluentui/react-icons";
import PropTypes from "prop-types";
//#region src/UI/utilityDisplay/deprecated/grid/GridPrimaryBar.jsx
const useStyles = makeStyles((theme) => ({
	root: {
		display: "flex",
		flexDirection: "row",
		padding: theme.spacing(.5)
	},
	label: {
		display: "flex",
		alignItems: "center",
		justifyContent: "flex-end"
	},
	title: {
		flex: 1,
		display: "flex",
		alignItems: "center",
		marginLeft: (props) => props.title ? theme.spacing(2) : 0
	},
	tabRoot: {
		minWidth: 0,
		textTransform: "none"
	},
	controls: {
		display: "flex",
		alignItems: "center",
		gridGap: theme.spacing(2),
		gap: theme.spacing(2),
		marginRight: theme.spacing(2)
	},
	icon: {
		background: theme.palette.common.white,
		padding: theme.spacing(1),
		color: theme.palette.primary.main
	}
}));
/** @deprecated Use the new grid. */
const GridPrimaryBar = (props) => {
	const classes = useStyles(props);
	const { children, onChange, fitClick, expandClick, clearClick, exportClick, filterClick, columnsClick, groupClick, title, hiddenActionButtons, hiddenLabels, hideSearchBar = false, secondaryActionButtons, saveViewClick, viewsClick, insightsClick, onPrimaryActionClick, primaryActionDisabled, primaryActionLabel, primaryActionIcon, onSearchKeyDown } = props;
	const [actionButtonMedianPx, setActionButtonMedianPx] = useState(0);
	const [actionButtons, setActionButtons] = useState([]);
	const [menuActionButtons, setMenuActionButtons] = useState([]);
	const [anchorEl, setAnchorEl] = useState(null);
	const [windowWidthBreakpoint, setWindowWidthBreakpoint] = useState(1400);
	const chipButtonSizePx = 100;
	const tokenButtonSizePx = 40;
	const open = Boolean(anchorEl);
	const id = open ? "simple-popover" : void 0;
	const defaultActionButtons = useMemo(() => [
		{
			icon: SaveIcon,
			tooltip: "Save Grid Configuration",
			label: "Save View",
			visible: !hiddenActionButtons.includes("saveView"),
			hideLabel: hiddenLabels.includes("saveView"),
			onClick: saveViewClick,
			background: "transparent"
		},
		{
			icon: FavoriteStarIcon,
			tooltip: "Browse Views",
			label: "Views",
			visible: !hiddenActionButtons.includes("views"),
			onClick: viewsClick,
			hideLabel: hiddenLabels.includes("views"),
			iconClassName: classes.icon
		},
		{
			icon: LightbulbIcon,
			tooltip: "Insights",
			label: "Insights",
			visible: !hiddenActionButtons.includes("insights"),
			hideLabel: hiddenLabels.includes("insights"),
			onClick: insightsClick,
			iconClassName: classes.icon
		},
		{
			icon: UploadIcon,
			tooltip: "Import/Export",
			label: "Import/Export",
			visible: !!exportClick && !hiddenActionButtons.includes("importExport"),
			hideLabel: hiddenLabels.includes("importExport"),
			onClick: exportClick,
			iconClassName: classes.icon
		},
		{
			icon: BulletedTreeListIcon,
			tooltip: "Group",
			label: "Group",
			visible: !!groupClick && !hiddenActionButtons.includes("group"),
			hideLabel: hiddenLabels.includes("group"),
			onClick: groupClick,
			iconClassName: classes.icon
		},
		{
			icon: FilterIcon,
			tooltip: "Filter",
			label: "Filter",
			visible: !!filterClick && !hiddenActionButtons.includes("filter"),
			hideLabel: hiddenLabels.includes("filter"),
			onClick: filterClick,
			iconClassName: classes.icon
		},
		{
			icon: TripleColumnIcon,
			tooltip: "Columns",
			label: "Columns",
			visible: !!columnsClick && !hiddenActionButtons.includes("columns"),
			hideLabel: hiddenLabels.includes("columns"),
			onClick: columnsClick,
			iconClassName: classes.icon
		},
		{
			icon: CombineIcon,
			tooltip: "Fit Grid",
			label: "Fit Grid",
			visible: !!fitClick && !hiddenActionButtons.includes("fitGrid"),
			hideLabel: hiddenLabels.includes("fitGrid"),
			onClick: fitClick,
			iconClassName: classes.icon
		},
		{
			icon: ExportIcon,
			tooltip: "Expand Grid",
			label: "Expand Grid",
			visible: !!expandClick && !hiddenActionButtons.includes("expandGrid"),
			hideLabel: hiddenLabels.includes("expandGrid"),
			onClick: expandClick,
			iconClassName: classes.icon
		},
		{
			icon: BlockedIcon,
			tooltip: "Clear Filters",
			label: "Clear Filters",
			visible: !!clearClick && !hiddenActionButtons.includes("clearFilters"),
			hideLabel: hiddenLabels.includes("clearFilters"),
			onClick: clearClick,
			iconClassName: classes.icon
		}
	], [
		classes.icon,
		clearClick,
		columnsClick,
		expandClick,
		exportClick,
		filterClick,
		fitClick,
		groupClick,
		hiddenActionButtons,
		hiddenLabels,
		insightsClick,
		saveViewClick,
		viewsClick
	]);
	const handlePopoverClick = (event) => {
		setAnchorEl(event.currentTarget);
	};
	const handlePopoverClose = () => {
		setAnchorEl(null);
	};
	const formatActionButtons = useCallback((buttons) => {
		return buttons.map((button) => {
			if (button.visible === void 0) button.visible = true;
			if (button.hideLabel === void 0) button.hideLabel = false;
			if (button.label === void 0) {
				button.label = button.tooltip ?? "Button";
				button.hideLabel = true;
			}
			if (button.iconClassName === void 0 && button.background === void 0) button.iconClassName = classes.icon;
			return button;
		});
	}, [classes?.icon]);
	useEffect(() => {
		const allActionButtons = formatActionButtons([...defaultActionButtons, ...secondaryActionButtons]);
		const menuButtons = [];
		const numActionButtons = allActionButtons.length - hiddenActionButtons.length;
		const buttonTotalWidth = numActionButtons * chipButtonSizePx - (chipButtonSizePx - tokenButtonSizePx) * hiddenLabels.length;
		const calculatedMedian = Math.floor(buttonTotalWidth / numActionButtons);
		let breakPoint = (calculatedMedian > 70 ? 950 : 900) + buttonTotalWidth;
		const currentWindowWidth = window.innerWidth;
		while (currentWindowWidth < breakPoint && allActionButtons.length > 0) {
			const movedAction = allActionButtons.pop();
			menuButtons.push(movedAction);
			breakPoint -= calculatedMedian;
		}
		setActionButtonMedianPx(calculatedMedian);
		setActionButtons(allActionButtons);
		setMenuActionButtons(menuButtons);
		setWindowWidthBreakpoint(breakPoint);
	}, [
		formatActionButtons,
		defaultActionButtons,
		secondaryActionButtons,
		hiddenActionButtons?.length,
		hiddenLabels?.length
	]);
	useEffect(() => {
		const handleResize = () => {
			let breakPoint_0 = windowWidthBreakpoint;
			let visibleButtons = [...actionButtons];
			let menuButtons_0 = [...menuActionButtons];
			while (window.innerWidth < breakPoint_0 && visibleButtons.length > 0) {
				const movedAction_0 = visibleButtons.pop();
				menuButtons_0.push(movedAction_0);
				breakPoint_0 -= actionButtonMedianPx;
			}
			while (window.innerWidth > breakPoint_0 + actionButtonMedianPx && menuButtons_0.length > 0) {
				const movedAction_1 = menuButtons_0.pop(0);
				visibleButtons.push(movedAction_1);
				breakPoint_0 += actionButtonMedianPx;
			}
			setActionButtons(visibleButtons);
			setMenuActionButtons(menuButtons_0);
			setWindowWidthBreakpoint(breakPoint_0);
		};
		window.addEventListener("resize", handleResize);
		return () => {
			window.removeEventListener("resize", handleResize);
		};
	}, [
		windowWidthBreakpoint,
		actionButtons,
		menuActionButtons,
		actionButtonMedianPx
	]);
	const handleCustomKeyDown = (event_0) => {
		if (onSearchKeyDown) {
			if (event_0.key === "Enter") onSearchKeyDown();
		}
	};
	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.title }, title && /* @__PURE__ */ React.createElement(Typography, {
		variant: "h6",
		style: {
			overflow: "hidden",
			whiteSpace: "nowrap",
			textOverflow: "ellipsis"
		}
	}, " ", title, " "), !hideSearchBar && /* @__PURE__ */ React.createElement("div", { style: {
		flex: 1,
		marginLeft: 16,
		marginRight: 16,
		marginTop: -16,
		maxWidth: 300
	} }, /* @__PURE__ */ React.createElement(AmbientTextField, {
		title,
		onChange,
		onKeyDown: handleCustomKeyDown,
		InputProps: {
			type: "search",
			startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, null))
		}
	}))), /* @__PURE__ */ React.createElement("div", { className: classes.controls }, actionButtons.map((button_0) => button_0.visible && (button_0.hideLabel ? /* @__PURE__ */ React.createElement(AmbientTokenButton, {
		id: "udpRecord-GridPrimaryBar-Token-" + button_0.label.replace(/ /g, "-"),
		udprecordid: "udpRecord-GridPrimaryBar-Token-" + button_0.label.replace(/ /g, "-"),
		icon: button_0.icon ?? AppIconDefaultIcon,
		tooltip: button_0.tooltip,
		onClick: button_0.onClick,
		ariaLabel: button_0.label,
		iconClassName: button_0.iconClassName
	}) : /* @__PURE__ */ React.createElement(AmbientChipButton, {
		id: "udpRecord-GridPrimaryBar-Chip-" + button_0.label.replace(/ /g, "-"),
		udprecordid: "udpRecord-GridPrimaryBar-Chip-" + button_0.label.replace(/ /g, "-"),
		icon: button_0.icon ?? AppIconDefaultIcon,
		tooltip: button_0.tooltip,
		label: button_0.label,
		onClick: button_0.onClick,
		background: button_0.background
	}))), !!menuActionButtons.length && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AmbientTokenButton, {
		id,
		icon: MoreVerticalIcon,
		tooltip: "More Actions",
		ariaLabel: "More Actions",
		onClick: handlePopoverClick,
		iconClassName: classes.icon
	}), /* @__PURE__ */ React.createElement(Popover, {
		id,
		open,
		anchorEl,
		onClose: handlePopoverClose,
		anchorOrigin: {
			vertical: "bottom",
			horizontal: "right"
		},
		transformOrigin: {
			vertical: "top",
			horizontal: "right"
		}
	}, menuActionButtons.slice(0).reverse().map((button_1) => {
		if (!button_1.visible) return null;
		return /* @__PURE__ */ React.createElement(MenuItem, {
			id: "udpRecord-GridPrimaryBar-MenuItem-" + button_1.label.replace(/ /g, "-"),
			udprecordid: "udpRecord-GridPrimaryBar-MenuItem-" + button_1.label.replace(/ /g, "-"),
			onClick: button_1.onClick,
			style: {
				display: "flex",
				justifyContent: "space-between"
			}
		}, /* @__PURE__ */ React.createElement(Typography, null, button_1.label), /* @__PURE__ */ React.createElement(FluentIcon, {
			component: button_1.icon ?? AppIconDefaultIcon,
			style: { marginLeft: 7 }
		}));
	})))), onPrimaryActionClick && /* @__PURE__ */ React.createElement(PrimaryActionButton, {
		onClick: onPrimaryActionClick,
		id: "udpRecord-GridPrimaryBar-Add",
		udprecordid: "udpRecord-GridPrimaryBar-Add",
		disabled: primaryActionDisabled
	}, /* @__PURE__ */ React.createElement(Typography, { style: { marginLeft: 4 } }, primaryActionLabel ?? "Button"), /* @__PURE__ */ React.createElement(FluentIcon, {
		style: { marginLeft: 7 },
		component: primaryActionIcon ?? AppIconDefaultIcon
	})));
};
GridPrimaryBar.propTypes = {
	title: PropTypes.string,
	children: PropTypes.node,
	onChange: PropTypes.func,
	fitClick: PropTypes.func,
	expandClick: PropTypes.func,
	clearClick: PropTypes.func,
	exportClick: PropTypes.func,
	insightsClick: PropTypes.func,
	filterClick: PropTypes.func,
	columnsClick: PropTypes.func,
	groupClick: PropTypes.func,
	hideSearchBar: PropTypes.bool,
	secondaryActionButtons: PropTypes.arrayOf(PropTypes.object),
	hiddenActionButtons: PropTypes.arrayOf(PropTypes.oneOf([
		"saveView",
		"views",
		"insights",
		"importExport",
		"group",
		"filter",
		"columns",
		"fitGrid",
		"expandGrid",
		"clearFilters"
	])),
	hiddenLabels: PropTypes.arrayOf(PropTypes.oneOf([
		"saveView",
		"views",
		"insights",
		"importExport",
		"group",
		"filter",
		"columns",
		"fitGrid",
		"expandGrid",
		"clearFilters"
	])),
	onPrimaryActionClick: PropTypes.func,
	primaryActionLabel: PropTypes.string,
	primaryActionIcon: PropTypes.elementType
};
//#endregion
export { GridPrimaryBar };

//# sourceMappingURL=GridPrimaryBar.mjs.map