import React, { MouseEvent, ReactElement } from "react";
import { IconButton, Menu, MenuItem } from "@mui/material";
import { useTranslation } from "react-i18next";
import { FlagIcon } from "components/common";

interface LanguageComponentProps {
  languageIsSet: boolean;
  anchorEl: null | HTMLElement;
  onMenuOpen: (event: MouseEvent<HTMLElement>) => void;
  onLanguageChange: (lang: string) => () => void;
  onClose: () => void;
  flagCode: string;
  flagsPath: string;
}

const LanguageComponent: React.FC<LanguageComponentProps> = ({
  languageIsSet,
  anchorEl,
  onMenuOpen,
  onLanguageChange,
  onClose,
  flagCode
}): ReactElement => {
  const { t } = useTranslation();
  const open = Boolean(anchorEl);

  return (
    <>
      <IconButton aria-controls="language-menu" aria-haspopup="true" onClick={onMenuOpen} color="inherit" size="small">
        {languageIsSet && <FlagIcon code={flagCode} />}
      </IconButton>
      <Menu
        id="language-menu"
        anchorEl={anchorEl}
        anchorOrigin={{
          vertical: "top",
          horizontal: "right"
        }}
        keepMounted
        transformOrigin={{
          vertical: "top",
          horizontal: "left"
        }}
        open={open}
        onClose={onClose}
      >
        <MenuItem onClick={onLanguageChange("ro")}>{t("Language.Romanian")}</MenuItem>
        <MenuItem onClick={onLanguageChange("en")}>{t("Language.English")}</MenuItem>
      </Menu>
    </>
  );
};

export default LanguageComponent;
