import { FC, MouseEvent, useState } from 'react';

import { Editor } from '@tiptap/react';

import { IconTextSize } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Menu from '@material-hu/mui/Menu';
import MenuItem from '@material-hu/mui/MenuItem';
import { Theme, useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { TooltipProps } from '@material-hu/components/design-system/Tooltip/types';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

type HeadingMenuProps = {
  editor: Editor;
  commonStyles: { height: string; width: string; borderRadius: string };
  activeStyles: (theme: Theme) => {
    backgroundColor: string;
    color: string;
  };
  TooltipComponent: FC<TooltipProps>;
};

type Level = 1 | 2 | 3 | 4 | 5 | 6;

const HeadingMenu: FC<HeadingMenuProps> = props => {
  const { editor, commonStyles, activeStyles, TooltipComponent } = props;

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

  const { t } = useTranslation('web_only');
  const theme = useTheme();

  const options = [
    {
      label: t('top_bar_rich_text_editor.h1'),
      level: 1,
      style: theme.typography.h5,
    },
    {
      label: t('top_bar_rich_text_editor.h2'),
      level: 2,
      style: theme.typography.subtitle1,
    },
    {
      label: t('top_bar_rich_text_editor.h3'),
      level: 3,
      style: theme.typography.body1,
    },
    {
      label: t('top_bar_rich_text_editor.h4'),
      level: 4,
      style: theme.typography.body2,
    },
  ];

  const openMenu = (event: MouseEvent<HTMLButtonElement>) =>
    setAnchorEl(event.currentTarget);

  const closeMenu = () => setAnchorEl(null);

  const selectHeading = (level: number) => {
    editor
      .chain()
      .focus()
      .toggleHeading({ level: level as Level })
      .run();
    closeMenu();
  };

  return (
    <>
      <TooltipComponent title={t('top_bar_rich_text_editor.headings')}>
        <IconButton
          id="heading-menu-button"
          aria-label={t('top_bar_rich_text_editor.CHAT_MENU')}
          aria-controls="heading-menu"
          aria-expanded={open ? 'true' : undefined}
          aria-haspopup="true"
          onClick={openMenu}
          sx={{
            ...commonStyles,
            ...(editor.isActive('heading') && activeStyles(theme)),
          }}
        >
          <IconTextSize />
        </IconButton>
      </TooltipComponent>
      <Menu
        id="heading-menu"
        MenuListProps={{
          'aria-labelledby': 'heading-menu-button',
        }}
        anchorEl={anchorEl}
        open={open}
        onClose={closeMenu}
      >
        {options.map(({ label, level, style }) => (
          <MenuItem
            key={label}
            onClick={() => selectHeading(level)}
            selected={editor.isActive('heading', { level: level })}
          >
            <Typography sx={{ style }}>{label}</Typography>
          </MenuItem>
        ))}
      </Menu>
    </>
  );
};

export default HeadingMenu;