import { MenuItemProps } from '@material-hu/components/design-system/Menu/components/MenuItem/types';

import { useCommentEnableDisable } from 'src/hooks/useCommentEnableDisable';
import { disableOrEnableCommentsFeedListData } from 'src/pages/dashboard/feed/queries';
import { enableOrDisableCommentsPost } from 'src/services/posts';

import CommentEnableOrDisableMenuItem from './CommentEnableOrDisableMenuItem';

export type PostCommentEnableOrDisableProps = Omit<MenuItemProps, 'id'> & {
  id: number;
  commentsEnabled: boolean;
};

const PostCommentEnableOrDisable = ({
  id,
  commentsEnabled,
  ...menuProps
}: PostCommentEnableOrDisableProps) => {
  const { handleDisableComment, handleEnableComment } = useCommentEnableDisable(
    {
      id,
      enableService: (postId: number, enabled: boolean) =>
        enableOrDisableCommentsPost(postId, enabled),
      onSuccess: (enabled: boolean) => {
        disableOrEnableCommentsFeedListData(id, enabled);
      },
    },
  );

  return (
    <CommentEnableOrDisableMenuItem
      {...menuProps}
      commentsEnabled={commentsEnabled}
      onDisableComment={handleDisableComment}
      onEnableComment={handleEnableComment}
    />
  );
};

export default PostCommentEnableOrDisable;