import React, { useEffect, useRef, useState } from "react";
import { ClickAwayListener, Grow, IconButton, MenuItem, MenuList, Paper, Popper, makeStyles } from "@material-ui/core";
import { TranslateIcon } from "@fluentui/react-icons";
import i18n from "i18next";
//#region src/shell/ui/LanguageSwitcher.jsx
const useStyles = makeStyles((theme) => ({
	root: { display: "flex" },
	paper: { marginRight: theme.spacing(2) }
}));
const LanguageSwitcher = (props) => {
	const classes = useStyles();
	const [open, setOpen] = useState(false);
	const anchorRef = useRef(null);
	const { languages } = props;
	const handleToggle = () => {
		setOpen((prevOpen) => !prevOpen);
	};
	const handleClose = (event) => {
		if (anchorRef.current && anchorRef.current.contains(event.target)) return;
		setOpen(false);
	};
	function handleListKeyDown(event_0) {
		if (event_0.key === "Tab") {
			event_0.preventDefault();
			setOpen(false);
		}
	}
	const prevOpen_0 = useRef(open);
	useEffect(() => {
		if (prevOpen_0.current === true && open === false) anchorRef.current.focus();
		prevOpen_0.current = open;
	}, [open]);
	const handleLanguageChange = (event_1) => {
		languageSelector(event_1.languageCode);
	};
	const languageSelector = (defaultLang) => {
		i18n.changeLanguage(defaultLang);
	};
	if (languages != null) return /* @__PURE__ */ React.createElement("div", {
		id: "udpRecord-LanguageSwitcher",
		className: classes.root
	}, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(IconButton, {
		id: "udpRecord-LanguageSwitcher-IconButton",
		udprecordid: "udpRecord-LanguageSwitcher-IconButton",
		ref: anchorRef,
		"aria-controls": open ? "menu-list-grow" : void 0,
		"aria-haspopup": "true",
		onClick: handleToggle
	}, /* @__PURE__ */ React.createElement(TranslateIcon, { style: {
		color: "white",
		opacity: .8
	} })), /* @__PURE__ */ React.createElement(Popper, {
		open,
		anchorEl: anchorRef.current,
		role: void 0,
		transition: true,
		disablePortal: true
	}, ({ TransitionProps, placement }) => /* @__PURE__ */ React.createElement(Grow, {
		...TransitionProps,
		style: { transformOrigin: placement === "bottom" ? "center top" : "center bottom" }
	}, /* @__PURE__ */ React.createElement(Paper, null, /* @__PURE__ */ React.createElement(ClickAwayListener, {
		id: "udpRecord-LanguageSwitcher-ClickAway",
		udprecordid: "udpRecord-LanguageSwitcher-ClickAway",
		onClickAway: handleClose
	}, /* @__PURE__ */ React.createElement(MenuList, {
		autoFocusItem: open,
		id: "menu-list-grow",
		udprecordid: "udpRecord-LanguageSwitcher-MenuList",
		onKeyDown: handleListKeyDown,
		onClick: () => setOpen(false)
	}, languages.map((data) => /* @__PURE__ */ React.createElement(MenuItem, {
		id: "udpRecord-LanguageSwitcher-MenuItem-" + data.languageLabel,
		udprecordid: "udpRecord-LanguageSwitcher-MenuItem-" + data.languageLabel,
		onClick: () => handleLanguageChange(data),
		value: data.languageCode,
		key: data.languageId
	}, data.languageLabel)))))))));
	else return null;
};
//#endregion
export { LanguageSwitcher };

//# sourceMappingURL=LanguageSwitcher.mjs.map