import { useMutation } from "@apollo/client";
import { Button } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { TOGGLE_CONVERSATION_ARCHIVE } from "../../graphql/conversations.queries";

export default function ChatArchiveButton({ conversation }) {
  const [loading, setLoading] = useState(false);
  const { t } = useTranslation();
  const [updateConversation] = useMutation(TOGGLE_CONVERSATION_ARCHIVE);
  const handleToggleArchive = async () => {
    setLoading(true);

    await updateConversation({
      variables: { id: conversation.id, archived: !conversation.archived },
      refetchQueries: ["CONVERSATION_LIST_QUERY"]
    });

    setLoading(false);
  };

  return (
    <Button onClick={handleToggleArchive} loading={loading} type="primary">
      {conversation.archived ? t("messaging.labels.unarchive") : t("messaging.labels.archive")}
    </Button>
  );
}