import { MouseEvent, useState } from 'react';

import { TablerIcon } from '@material-hu/icons/tabler';
import { IconDotsVertical } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';
import HuMenu from '@material-hu/components/design-system/Menu';

import { useLokaliseTranslation } from 'src/utils/i18n';

export type Option = {
  id: string;
  onClick: (event: MouseEvent) => void;
  title: string;
  description?: string;
  Icon?: TablerIcon;
};

export type LibraryMenuProps = {
  options: Option[];
  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
  onClose?: (event: MouseEvent) => void;
  disabled?: boolean;
};

export const LibraryMenu = ({
  options,
  onClick = () => null,
  onClose = () => null,
  disabled = false,
}: LibraryMenuProps) => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);

  const { t } = useLokaliseTranslation('libraries');

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

  const handleClose = (event: MouseEvent) => {
    event.stopPropagation();
    setAnchorEl(null);
    onClose(event);
  };

  const handleOptionClick =
    (callback: Option['onClick']) => (event: MouseEvent) => {
      event.stopPropagation();
      handleClose(event);
      callback(event);
    };

  return (
    <>
      <Button
        id="library-button-menu"
        aria-label={t('library.menu')}
        aria-controls="library-icon-menu"
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
        onClick={disabled ? undefined : handleClick}
        disabled={disabled}
        variant="outlined"
        sx={{
          minWidth: 'unset',
          padding: 1,
        }}
      >
        <IconDotsVertical />
      </Button>
      <HuMenu
        id="library-icon-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        aria-labelledby="library-button-menu"
        sx={{
          '& ul': {
            p: 0,
          },
        }}
      >
        {options.map(option => (
          <Stack
            id={`library-menu-option-${option.id}`}
            key={option.id}
            component="li"
            sx={{
              height: '72px',
            }}
          >
            <HuListItem
              onClick={handleOptionClick(option.onClick)}
              text={{
                title: option.title,
                description: option.description,
              }}
              avatar={option.Icon ? { Icon: option.Icon } : undefined}
            />
          </Stack>
        ))}
      </HuMenu>
    </>
  );
};

export default LibraryMenu;