import { type MouseEvent, memo } from 'react';

import { IconChevronRight, type TablerIcon } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Avatar from '@material-hu/components/design-system/Avatar';
import MenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';

export type GoalCardMenuItemProps = {
  icon: TablerIcon;
  title: string;
  onClick: () => void;
  onClose: () => void;
  disabled?: boolean;
  showChevron?: boolean;
};

const GoalCardMenuItem = (props: GoalCardMenuItemProps) => {
  const {
    icon: Icon,
    title,
    onClick,
    onClose,
    disabled = false,
    showChevron = true,
  } = props;

  const handleMenuItemClick = (event: MouseEvent<HTMLElement>) => {
    event.stopPropagation();
    if (disabled) return;
    onClose();
    onClick();
  };

  return (
    <MenuItem
      onClick={handleMenuItemClick}
      disabled={disabled}
    >
      <Stack
        direction="row"
        alignItems="center"
        spacing={1.5}
        sx={{ width: '100%' }}
      >
        <Avatar
          Icon={Icon}
          size="small"
          sx={{
            backgroundColor: theme =>
              theme.palette.new?.background?.elements?.grey,
            color: theme => theme.palette.new?.icon?.neutral?.default,
          }}
        />
        <Typography
          variant="globalS"
          fontWeight="fontWeightSemiBold"
          sx={{ flex: 1 }}
        >
          {title}
        </Typography>
        {showChevron && (
          <IconChevronRight
            size={16}
            color="currentColor"
          />
        )}
      </Stack>
    </MenuItem>
  );
};

export default memo(GoalCardMenuItem);