/* eslint-disable react/jsx-key */
import React, { ChangeEvent, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Button, IconButton, Menu, MenuItem, Typography } from "@mui/material";
import { ipcRenderer } from "electron";
import { Language } from "../../constants/Language";
import { getRootStore } from "../../models/root-store.ts";
import LanguageIcon from "@mui/icons-material/Language";

const Lang = () => {
  const { i18n } = useTranslation();
  const [lang, setLang] = useState<Language>(i18n.language as Language);
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const [rootStore] = useState(() => getRootStore());

  useEffect(() => {
    ipcRenderer.on("locale", (event, result) => {
      const subbedResult = result.substring(0, 2);
      let buf = subbedResult;
      if (rootStore.settings.defaultLanguage !== "") {
        buf = rootStore.settings.defaultLanguage;
      }

      switch (buf) {
        case "fr":
          i18n.changeLanguage(Language.fr);
          setLang(Language.fr);
          break;
        case "en":
          i18n.changeLanguage(Language.en);
          setLang(Language.en);
          break;
        case "nl":
          i18n.changeLanguage(Language.nl);
          setLang(Language.nl);
          break;
        case "de":
          i18n.changeLanguage(Language.de);
          setLang(Language.de);
          break;
        case "it":
          i18n.changeLanguage(Language.it);
          setLang(Language.it);
          break;
        case "es":
          i18n.changeLanguage(Language.es);
          setLang(Language.es);
          break;
        default:
          i18n.changeLanguage(Language.en);
          setLang(Language.en);
          break;
      }
    });
    return () => {
      ipcRenderer.removeAllListeners("locale");
    };
  });

  const handleClose = () => {
    setAnchorEl(null);
  };

  const changeLanguageSimple = (langLocal: Language) => {
    switch (langLocal) {
      case "English":
        setLang(Language.en);
        i18n.changeLanguage(Language.en);
        rootStore.settings.setDefaultLanguage("en");
        break;
      case "Français":
        setLang(Language.fr);
        i18n.changeLanguage(Language.fr);
        rootStore.settings.setDefaultLanguage("fr");
        break;
      case "Nederlands":
        setLang(Language.nl);
        i18n.changeLanguage(Language.nl);
        rootStore.settings.setDefaultLanguage("nl");
        break;
      case "Deutsche":
        setLang(Language.de);
        i18n.changeLanguage(Language.de);
        rootStore.settings.setDefaultLanguage("de");
        break;
      case "Italiano":
        setLang(Language.it);
        i18n.changeLanguage(Language.it);
        rootStore.settings.setDefaultLanguage("it");
        break;
      case "Española":
        setLang(Language.es);
        i18n.changeLanguage(Language.es);
        rootStore.settings.setDefaultLanguage("es");
        break;
      default:
        setLang(Language.en);
        i18n.changeLanguage(Language.en);
        rootStore.settings.setDefaultLanguage("en");
        break;
    }
    handleClose();
  };

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };
  return (
    <>
      <IconButton
        aria-controls="simple-menu"
        aria-haspopup="true"
        style={{
          color: "white",
          marginRight: 10,
        }}
        onClick={handleClick}
      >
        <LanguageIcon
          fontSize={rootStore.layout.iconSize}
          style={{ margin: 10 }}
        />
        <Typography
          sx={{
            color: "white",
          }}
        >{`${lang}▼`}</Typography>
      </IconButton>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={() => changeLanguageSimple(Language.en)}>
          English
        </MenuItem>
        <MenuItem onClick={() => changeLanguageSimple(Language.fr)}>
          Français
        </MenuItem>
        <MenuItem onClick={() => changeLanguageSimple(Language.nl)}>
          Nederlands
        </MenuItem>
        <MenuItem onClick={() => changeLanguageSimple(Language.de)}>
          Deutsche
        </MenuItem>
        <MenuItem onClick={() => changeLanguageSimple(Language.it)}>
          Italiano
        </MenuItem>
        <MenuItem onClick={() => changeLanguageSimple(Language.es)}>
          Española
        </MenuItem>
      </Menu>
    </>
  );
};

export default Lang;
