import {queryClient} from '@common/http/query-client';
import {Button} from '@common/ui/buttons/button';
import {Trans} from '@common/i18n/trans';
import React from 'react';
import {ButtonVariant} from '@common/ui/buttons/get-shared-button-style';
import {ButtonSize} from '@common/ui/buttons/button-size';
import {useRestoreComments} from '@common/comments/requests/use-restore-comments';

interface Props {
  commentIds: number[];
  variant?: ButtonVariant;
  size?: ButtonSize;
}
export function RestoreCommentsButton({
  commentIds,
  variant = 'outline',
  size = 'xs',
}: Props) {
  const restoreComments = useRestoreComments();
  return (
    <Button
      variant={variant}
      size={size}
      className="mr-10"
      disabled={restoreComments.isPending}
      color="primary"
      onClick={() => {
        restoreComments.mutate(
          {commentIds},
          {
            onSuccess: () => {
              queryClient.invalidateQueries({queryKey: ['comment']});
            },
          },
        );
      }}
    >
      <Trans message="Restore" />
    </Button>
  );
}