PNSPS-frontend-MaterialUI/src/layout/MainLayout/Header/HeaderContent/LocaleSelector.js

import {useContext, useRef, useState} from 'react';
import ListItem from '@mui/material/ListItem';
// material-ui
import { useTheme } from '@mui/material/styles';
import {
    Box,
    ClickAwayListener,
    IconButton,
    List,
    ListItemButton,
    ListItemText,
    Paper,
    Popper,
    useMediaQuery
} from '@mui/material';

import Transitions from 'components/@extended/Transitions';
import LanguageIcon from '@mui/icons-material/Language';
import {FormattedMessage} from "react-intl";
import * as React from "react";
import LocaleContext from "components/I18nProvider";

// ==============================|| HEADER CONTENT - NOTIFICATION ||============================== //

const LocaleSelector = () => {
    const theme = useTheme();
    const matchesXs = useMediaQuery(theme.breakpoints.down('md'));
    const { setLocale } = useContext(LocaleContext);

    const anchorRef = useRef(null);
    const [open, setOpen] = useState(false);
    const handleToggle = () => {
        setOpen((prevOpen) => !prevOpen);
    };


    const handleClose = (event) => {
        if (anchorRef.current && anchorRef.current.contains(event.target)) {
            return;
        }
        setOpen(false);
    };

    const iconBackColorOpen = 'grey.300';
    const iconBackColor = '#ffffff';

    return (
        <Box sx={{ flexShrink: 0, ml: 0.75 }}>
            <IconButton
                disableRipple
                color="secondary"
                sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
                aria-label="open profile"
                ref={anchorRef}
                aria-controls={open ? 'profile-grow' : undefined}
                aria-haspopup="true"
                onClick={handleToggle}
            >
                <LanguageIcon />
            </IconButton>
            <Popper
                placement={matchesXs ? 'bottom' : 'bottom-end'}
                open={open}
                anchorEl={anchorRef.current}
                role={undefined}
                transition
                disablePortal
                popperOptions={{
                    modifiers: [
                        {
                            name: 'offset',
                            options: {
                                offset: [matchesXs ? -5 : 0, 9]
                            }
                        }
                    ]
                }}
            >
                {({ TransitionProps }) => (
                    <Transitions type="fade" in={open} {...TransitionProps}>
                        <Paper
                            sx={{
                                boxShadow: theme.customShadows.z1,
                                width: '100%',
                                minWidth: 285,
                                maxWidth: 420,
                                [theme.breakpoints.down('md')]: {
                                    maxWidth: 285
                                }
                            }}
                        >
                            <ClickAwayListener onClickAway={handleClose}>
                                <List
                                    component="nav"
                                >
                                    <ListItem disablePadding>
                                        <ListItemButton
                                            onClick={() => {
                                                setLocale("en")
                                                localStorage.setItem('locale','en');
                                                setOpen(false);
                                            }}
                                        >
                                            <ListItemText
                                                primary= <FormattedMessage id="en"/>
                                            />
                                        </ListItemButton>
                                    </ListItem>
                                    <ListItem disablePadding>
                                        <ListItemButton
                                            onClick={() => {
                                                setLocale("zh-HK");
                                                localStorage.setItem('locale','zh-HK');
                                                setOpen(false);
                                            }}
                                        >
                                            <ListItemText
                                                primary= <FormattedMessage id="zh-HK"/>
                                            />
                                        </ListItemButton>
                                    </ListItem>
                                    <ListItem disablePadding>
                                        <ListItemButton
                                            onClick={() => {
                                                setLocale("zh-CN")
                                                localStorage.setItem('locale','zh-CN');
                                                setOpen(false);
                                            }}
                                        >
                                            <ListItemText
                                                primary= <FormattedMessage id="zh-CN"/>
                                            />
                                        </ListItemButton>
                                    </ListItem>
                                </List>
                            </ClickAwayListener>
                        </Paper>
                    </Transitions>
                )}
            </Popper>
        </Box>
    );
};

export default LocaleSelector;