1  import LanguageIcon from '@mui/icons-material/Language';
 2  import { Button, IconButton, Popover, Stack } from "@mui/material";
 3  import { ITranslationService, ITranslationServiceSymbol } from 'ipmc-interfaces';
 4  import React, { useState } from "react";
 5  import { useService } from '../../context';
 6  
 7  export function LanguageSelector() {
 8  	const translationService = useService<ITranslationService>(ITranslationServiceSymbol);
 9  	const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
10  
11  	const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
12  		setAnchorEl(event.currentTarget);
13  	};
14  
15  	const handleClose = (lang: string | undefined = undefined) => {
16  		if (lang) {
17  			translationService.changeLanguage(lang);
18  		}
19  		setAnchorEl(null);
20  	};
21  
22  	const open = Boolean(anchorEl);
23  
24  	return <>
25  		<IconButton onClick={handleClick}>
26  			<LanguageIcon />
27  		</IconButton>
28  		<Popover
29  			open={open}
30  			anchorEl={anchorEl}
31  			onClose={() => handleClose()}
32  			anchorOrigin={{
33  				vertical: 'bottom',
34  				horizontal: 'left',
35  			}}
36  		>
37  			<Stack>
38  				<Button onClick={() => handleClose('en')}>
39  					English
40  				</Button>
41  				<Button onClick={() => handleClose('de')}>
42  					Deutsch
43  				</Button>
44  			</Stack>
45  		</Popover>
46  	</>;
47  }