"use strict";

const React = require("react");

const defaultStyle = require("./style.css");
const useTheme = require("../../util/themeable");
const isEventInsideRef = require("../../util/is-event-inside-ref");
const MenuItemContext = require("../../contexts/menu-item");

module.exports = function MenuBar({ style, children }) {
	let { withTheme } = useTheme({ control: "menu", defaultStyle });
	let [ isActive, setIsActive ] = React.useState(false);
	let [ selectedItem, setSelectedItem ] = React.useState([]);
	let element = React.useRef();
	
	React.useEffect(() => {
		function handleGlobalClick(event) {
			if (!isEventInsideRef(element, event)) {
				setIsActive(false);
			}
		}

		document.addEventListener("click", handleGlobalClick);

		return () => {
			document.removeEventListener("click", handleGlobalClick);
		};
	}, []);

	let itemContext = {
		menuType: "menuBar",
		selectedPath: selectedItem,
		isActive: isActive,
		onMouseEnter: (path) => {
			setSelectedItem(path);
		},
		onClick: (_path, hasMenu, isInMenu) => {
			// Only activate the menu bar if this *isn't* a direct-action button directly on the menubar
			if (hasMenu || isInMenu) {
				// NOTE: This is a toggle that sets isActive for the *whole* menu bar rather than an individual item, because pressing *any* button in the menu will trigger menu-display mode; after that, merely hovering over other buttons is enough to switch what menu is displayed.
				setIsActive((isActive) => !isActive);
			}
		}
	};

	return (
		<MenuItemContext.Provider value={itemContext}>
			<div className={withTheme("uilibComponent", "menuBar")} style={style} ref={element}>
				{children}
			</div>
		</MenuItemContext.Provider>
	);
};