"use client";

/* eslint-disable camelcase */
import { FC, useState } from "react";
import VoiceIcon from "@mui/icons-material/PhoneInTalk";
import { Box } from "@mui/material";
// import { useTheme } from "@mui/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTranslate, MenuItemLink } from "react-admin";
import webhooks from "../webhooks";
import voiceLines from "../voice/voicelines";
import voiceProviders from "../voice/providers";
import whatsappBots from "../whatsapp/bots";
import signalBots from "../signal/bots";
import { SubMenu } from "./SubMenu";

type MenuName = "menuVoice" | "menuSecurity";

export const Menu: FC = ({ onMenuClick, logout, dense = false }: any) => {
  const [state, setState] = useState({
    menuVoice: false,
    menuSecurity: false,
  });
  const translate = useTranslate();
  const theme: any = {}; // useTheme();
  // @ts-ignore
  const isXSmall = false; // useMediaQuery(theme?.breakpoints?.down("xs"));
  const open = true; // useSelector((state: any) => state.admin.ui.sidebarOpen);

  const handleToggle = (menu: MenuName) => {
    setState((state: any) => ({ ...state, [menu]: !state[menu] }));
  };

  return (
    <Box mt={1}>
      <MenuItemLink
        to={`/whatsappbots`}
        primaryText={translate(`pos.menu.whatsapp`, {
          smart_count: 2,
        })}
        leftIcon={<whatsappBots.icon />}
        onClick={onMenuClick}
        sidebarIsOpen={open}
        dense={dense}
      />
      <MenuItemLink
        to={`/signalbots`}
        primaryText={translate(`pos.menu.signal`, {
          smart_count: 2,
        })}
        leftIcon={<signalBots.icon />}
        onClick={onMenuClick}
        sidebarIsOpen={open}
        dense={dense}
      />
      <SubMenu
        handleToggle={() => handleToggle("menuVoice")}
        isOpen={state.menuVoice}
        sidebarIsOpen={open}
        name="pos.menu.voice"
        icon={<VoiceIcon />}
        dense={dense}
      >
        <MenuItemLink
          to={`/voiceproviders`}
          primaryText={translate(`resources.providers.name`, {
            smart_count: 2,
          })}
          leftIcon={<voiceProviders.icon />}
          onClick={onMenuClick}
          sidebarIsOpen={open}
          dense={dense}
        />
        <MenuItemLink
          to={`/voicelines`}
          primaryText={translate(`resources.voicelines.name`, {
            smart_count: 2,
          })}
          leftIcon={<voiceLines.icon />}
          onClick={onMenuClick}
          sidebarIsOpen={open}
          dense={dense}
        />
      </SubMenu>
      <MenuItemLink
        to={`/webhooks`}
        primaryText={translate(`resources.webhooks.name`, {
          smart_count: 2,
        })}
        leftIcon={<webhooks.icon />}
        onClick={onMenuClick}
        sidebarIsOpen={open}
        dense={dense}
      />
      {isXSmall && logout}
    </Box>
  );
};

export default Menu;