import React, { useState, useRef, useEffect } from 'react';
import { ClickAwayListener, Grow, Paper, Popper, MenuList, makeStyles, IconButton, MenuItem } from '@material-ui/core';
import { TranslateIcon } from '@fluentui/react-icons';
import i18n from 'i18next';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex'
    },
    paper: {
        marginRight: theme.spacing(2)
    }
}));
export 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) {
        if (event.key === 'Tab') {
            event.preventDefault();
            setOpen(false);
        }
    }
    // return focus to the button when we transitioned from !open -> open
    const prevOpen = useRef(open);
    useEffect(() => {
        if (prevOpen.current === true && open === false) {
            anchorRef.current.focus();
        }
        prevOpen.current = open;
    }, [open]);
    const handleLanguageChange = (event) => {
        const currentLanguage = event;
        //setLangKey(currentLanguage.languageCode);
        languageSelector(currentLanguage.languageCode);
    };
    const languageSelector = (defaultLang) => {
        i18n.changeLanguage(defaultLang);
    };
    if (languages != null) {
        return (React.createElement("div", { id: "udpRecord-LanguageSwitcher", className: classes.root }, React.createElement("div", null, React.createElement(IconButton, { id: "udpRecord-LanguageSwitcher-IconButton", udprecordid: "udpRecord-LanguageSwitcher-IconButton", ref: anchorRef, "aria-controls": open ? 'menu-list-grow' : undefined, "aria-haspopup": "true", onClick: handleToggle }, React.createElement(TranslateIcon, { style: { color: 'white', opacity: 0.8 } })), React.createElement(Popper, { open: open, anchorEl: anchorRef.current, role: undefined, transition: true, disablePortal: true }, ({ TransitionProps, placement }) => (React.createElement(Grow, Object.assign({}, TransitionProps, { style: {
                transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
            } }), React.createElement(Paper, null, React.createElement(ClickAwayListener, { id: "udpRecord-LanguageSwitcher-ClickAway", udprecordid: "udpRecord-LanguageSwitcher-ClickAway", onClickAway: handleClose }, React.createElement(MenuList, { autoFocusItem: open, id: "menu-list-grow", udprecordid: "udpRecord-LanguageSwitcher-MenuList", onKeyDown: handleListKeyDown, onClick: () => setOpen(false) }, languages.map((data) => 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);
    }
};
//# sourceMappingURL=LanguageSwitcher.js.map