"use client"
import { IconButton } from "@/components/ui/button";
import { useGetAIUserBaseInfo } from "@/hooks/aiUser";
import { useDoAiUserLiked } from "@/hooks/useCommon";
import { aiUserKeys, imKeys } from "@/lib/query-keys";
import { useQueryClient } from "@tanstack/react-query";
import { useParams } from "next/navigation";
import { useChatConfig } from "../../../context/chatConfig";

const ChatProfileLikeIcon = () => {
  const { aiId, aiInfo } = useChatConfig();
  
  const { mutateAsync: doAiUserLiked } = useDoAiUserLiked();
  const { liked } = aiInfo || {};
  const queryClient = useQueryClient();

  const handleLike = () => {
    doAiUserLiked({ aiId: Number(aiId), likedStatus: liked ? 'CANCELED' : 'LIKED' });
    queryClient.setQueryData(aiUserKeys.baseInfo({ aiId: Number(aiId) }), (oldData: any) => {
      return {
        ...oldData,
        liked: !liked,
      }
    });
    queryClient.setQueryData(imKeys.imUserInfo(Number(aiId)), (oldData: any) => {
      return {
        ...oldData,
        liked: !liked,
      }
    });
    queryClient.setQueryData(aiUserKeys.stat({ aiId: Number(aiId) }), (oldData: any) => {
      return {
        ...oldData,
        likedNum: !liked ? oldData.likedNum + 1 : oldData.likedNum - 1,
      }
    });
  }

  return (
    <IconButton
      variant="tertiary"
      size="large"
      onClick={handleLike}
    >
      {!liked ? <i className="iconfont icon-Like" /> : <i className="iconfont icon-Like-fill text-important-normal" />}
    </IconButton>
  );
}
 
export default ChatProfileLikeIcon;