import useHuGoTheme from 'src/hooks/useHuGoTheme';
import PostDelete from 'src/pages/dashboard/feed/components/PostDelete';
import { insertIf } from 'src/utils/arrays';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import MoreMenu, { MoreMenuOption } from '../deeplinks/MoreMenu';

import PostCommentEdit from './PostCommentEdit';

type CommentActionsProps = {
  id: number;
  postId: number;
  handleDelete: () => void;
  handleEditOpen: () => void;
  isEditEnabled: boolean;
  isDeleteEnabled: boolean;
  groupId?: number;
  eventId?: number;
};

const CommentActions = ({
  id,
  postId,
  handleDelete,
  handleEditOpen,
  isEditEnabled,
  isDeleteEnabled,
  groupId,
  eventId,
}: CommentActionsProps) => {
  const HugoThemeProvider = useHuGoTheme();
  const { t } = useTranslation();

  if (!isDeleteEnabled && !isEditEnabled) return null;

  const menuOptions: MoreMenuOption[] = [
    ...insertIf(isEditEnabled, {
      id: `comment-${id}-edit`,
      enabled: isEditEnabled,
      closeOnSelect: true,
      option: (
        <PostCommentEdit
          key={`comment-${id}-edit`}
          onClick={handleEditOpen}
        />
      ),
    }),
    ...insertIf(isDeleteEnabled, {
      id: `comment-${id}-delete`,
      enabled: isDeleteEnabled,
      option: (
        <PostDelete
          id={id}
          key={`comment-${id}-delete`}
          isComment
          postId={postId}
          onDelete={handleDelete}
          showIcon={false}
          groupId={groupId}
          eventId={eventId}
        />
      ),
    }),
  ];

  return (
    <HugoThemeProvider>
      <MoreMenu
        id={`comment-${id}-menu`}
        label={t('POST_MENU')}
        menuOptions={menuOptions}
        size="large"
      />
    </HugoThemeProvider>
  );
};

export default CommentActions;