import * as React from 'react';
import { useTranslation } from 'next-i18next';
import { useRouter } from 'next/router';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Menu from '@mui/material/Menu';
import Button from '@mui/material/Button';
import MenuItem from '@mui/material/MenuItem';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import TranslateIcon from '@mui/icons-material/Translate';

import { SUPPORT_LANGUAGES } from 'src/constants';

export default function LangSwitch(props: any) {
  const [anchorElLang, setAnchorElLang] = React.useState<null | HTMLElement>(
    null
  );

  const { t, i18n } = useTranslation();
  const router = useRouter();

  const handleOpenLangMenu = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorElLang(event.currentTarget);
  };

  const handleCloseLangMenu = () => {
    setAnchorElLang(null);
  };

  const onToggleLanguageClick = (newLocale: string) => {
    const { pathname, asPath, query } = router;
    router.push({ pathname, query }, asPath, { locale: newLocale });
  };

  const handleChangeLang = (lang: string) => () => {
    onToggleLanguageClick(lang);
    handleCloseLangMenu();
  };

  return (
    <>
      <Button
        onClick={handleOpenLangMenu}
        startIcon={<TranslateIcon fontSize="inherit" />}
        endIcon={<ExpandMoreIcon fontSize="inherit" />}
        sx={{
          textTransform: 'none',
          display: {
            xs: 'none',
            md: 'inline-flex',
          },
          color: 'custom.k2',
        }}
      >
        <Typography>{t(`lang.${i18n?.language}`)}</Typography>
      </Button>
      <IconButton
        onClick={handleOpenLangMenu}
        size="small"
        sx={{
          display: {
            xs: 'inline-flex',
            md: 'none',
          },
          color: 'custom.k2',
          mr: {
            xs: 2,
            md: 0,
          },
        }}
      >
        <TranslateIcon fontSize="inherit" />
      </IconButton>
      <Menu
        sx={{ mt: '45px' }}
        id="menu-lang"
        anchorEl={anchorElLang}
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'right',
        }}
        keepMounted
        transformOrigin={{
          vertical: 'top',
          horizontal: 'right',
        }}
        open={Boolean(anchorElLang)}
        onClose={handleCloseLangMenu}
      >
        {SUPPORT_LANGUAGES.map((lang) => (
          <MenuItem
            key={lang}
            onClick={handleChangeLang(lang)}
            selected={lang === i18n?.language}
          >
            <Typography textAlign="center">{t(`lang.${lang}`)}</Typography>
          </MenuItem>
        ))}
      </Menu>
    </>
  );
}