import { FC, useState } from 'react';
import { useNavigate } from 'react-router-dom';

import AddCommentOutlinedIcon from '@material-hu/icons/material/AddCommentOutlined';
import GroupIcon from '@material-hu/icons/material/Group';
import MoreVertIcon from '@material-hu/icons/material/MoreVert';
import PersonIcon from '@material-hu/icons/material/Person';
import TagIcon from '@material-hu/icons/material/Tag';
import Box from '@material-hu/mui/Box';
import IconButton from '@material-hu/mui/IconButton';
import ListItemIcon from '@material-hu/mui/ListItemIcon';
import ListItemText from '@material-hu/mui/ListItemText';
import Menu from '@material-hu/mui/Menu';
import MenuItem from '@material-hu/mui/MenuItem';
import Tooltip from '@material-hu/mui/Tooltip';

import { useAuth } from 'src/contexts/JWTContext';
import { hasAllPermissions, ROUTE_PERMISSIONS } from 'src/utils/permissions';

import { useTranslation } from 'src/components/dashboard/chat/i18n';
import { chatRoutes } from 'src/components/dashboard/chat/routes';

const newChatItems = [
  {
    id: 'new-chat-one-to-one',
    path: chatRoutes.new.oneToOne(),
    label: 'NEW_CHAT',
    icon: <PersonIcon fontSize="small" />,
    requiredPermissions: ROUTE_PERMISSIONS.NEW_ONE_TO_ONE,
  },
  {
    id: 'new-chat-group',
    path: chatRoutes.new.group(),
    label: 'NEW_GROUP',
    icon: <GroupIcon fontSize="small" />,
    requiredPermissions: ROUTE_PERMISSIONS.NEW_GROUP,
  },
];

const newTicketItems = [
  {
    id: 'new-chat-ticket',
    path: chatRoutes.new.ticket(),
    label: 'NEW_TICKET',
    icon: <TagIcon fontSize="small" />,
    requiredPermissions: ROUTE_PERMISSIONS.NEW_TICKET,
  },
];

const NewMenu: FC = () => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);

  const { t } = useTranslation();
  const navigate = useNavigate();
  const { permissions, instance } = useAuth();

  const itemsFiltered = [
    ...(instance.allowCreateChats ? newChatItems : []),
    ...newTicketItems,
  ].filter(item => hasAllPermissions(permissions, item.requiredPermissions));

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

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

  const handleSelect = path => {
    handleClose();
    navigate(path);
  };

  const newGenericChat = () => navigate(chatRoutes.new.generic());

  return (
    <>
      {itemsFiltered.length > 0 && (
        <Box>
          {instance.allowCreateChats && (
            <Tooltip title={t('NEW')}>
              <IconButton
                aria-label={t('NEW')}
                aria-controls="new-chat-menu"
                aria-haspopup="true"
                size="small"
                onClick={newGenericChat}
              >
                <AddCommentOutlinedIcon />
              </IconButton>
            </Tooltip>
          )}
          <Tooltip title={t('CREATE')}>
            <IconButton
              id="new-chat-button"
              aria-label={t('CREATE')}
              aria-controls="new-chat-menu"
              aria-haspopup="true"
              aria-expanded={open ? 'true' : undefined}
              size="small"
              onClick={handleClick}
            >
              <MoreVertIcon />
            </IconButton>
          </Tooltip>
          <Menu
            id="new-chat-menu"
            anchorEl={anchorEl}
            open={open}
            onClose={handleClose}
            MenuListProps={{
              'aria-labelledby': 'new-chat-button',
            }}
          >
            {itemsFiltered.map(item => (
              <MenuItem
                key={item.id}
                onClick={() => handleSelect(item.path)}
              >
                <ListItemIcon>{item.icon}</ListItemIcon>
                <ListItemText>{t(item.label)}</ListItemText>
              </MenuItem>
            ))}
          </Menu>
        </Box>
      )}
    </>
  );
};

export default NewMenu;