import { IconMessage, IconMessageX } from '@material-hu/icons/tabler';

import HuListItem from '@material-hu/components/design-system/List/components/ListItem';
import HuMenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';
import { MenuItemProps } from '@material-hu/components/design-system/Menu/components/MenuItem/types';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

export type CommentEnableOrDisableMenuItemProps = Omit<
  MenuItemProps,
  'onClick'
> & {
  commentsEnabled: boolean;
  onDisableComment: () => void;
  onEnableComment: () => void;
};

const CommentEnableOrDisableMenuItem = ({
  commentsEnabled,
  onDisableComment,
  onEnableComment,
  ...menuProps
}: CommentEnableOrDisableMenuItemProps) => {
  const { t } = useTranslation();

  return (
    <HuMenuItem
      {...menuProps}
      onClick={commentsEnabled ? onDisableComment : onEnableComment}
      sx={{ p: 0 }}
    >
      <HuListItem
        sx={{ p: 0 }}
        avatar={{ Icon: commentsEnabled ? IconMessageX : IconMessage }}
        text={{
          title: commentsEnabled
            ? t('post:disable_comments')
            : t('post:activate_comments'),
        }}
      />
    </HuMenuItem>
  );
};

export default CommentEnableOrDisableMenuItem;