import { Text, View } from "@tarojs/components";
import { interactionApi } from "../../api/interaction";
import { HeartFill, Heart, Message } from "@nutui/icons-react-taro";
import { useEffect, useState } from "react";
import CommentInput from "./comment-input";

const CommentListInteraction = ({ postData }) => {
  const [postDetail, setPostDetail] = useState<any>(null);
  const [showCommentInput, setShowCommentInput] = useState(false);

  useEffect(() => {
    setPostDetail(postData);
  }, [postData]);

  // 点赞
  const handleInteraction = async (postId: number, type) => {
    const res: any = await interactionApi({
      target_type: "post",
      target_id: postId,
      interaction_type: type,
    });
    if (res.code === 200) {
      const data = JSON.parse(JSON.stringify(postDetail));

      if (data.id === postId) {
        data.interaction_type = type;
        data.like_count =
          type === "praise" ? data.like_count + 1 : data.like_count - 1;
      }

      setPostDetail(data);
    }
  };
  return postDetail ? (
    <>
      <View className="bg-[#fff] flex items-center justify-between fixed bottom-[0px] left-[0] right-[0] p-[10px] pb-[30px] border-t-[2px] border-t-solid border-t-[#e0e0e0]">
        <View
          className="w-[70vw] h-[30px] text-[14px] text-[#949494] bg-[#f8f8f8] rounded-[10rpx] line-height-[30px]"
          onClick={() => {
            setShowCommentInput(true);
          }}
        >
          说点什么...
        </View>
        <View
          className="flex items-center"
          onClick={() => {
            handleInteraction(
              postDetail.id,
              postDetail.interaction_type === "praise" ? "dispraise" : "praise"
            );
          }}
        >
          {postDetail.interaction_type === "praise" ? (
            <HeartFill size={16} color="#ec4342" />
          ) : (
            <Heart size={16} color="#949494" />
          )}
          <Text className="ml-[5px] text-[16px] text-[#949494]">
            {postDetail.like_count}
          </Text>
        </View>
        <View className="flex items-center">
          <Message size={16} color="#949494" />
          <Text className="ml-[5px] text-[16px] text-[#949494]">
            {postDetail.comment_count}
          </Text>
        </View>
      </View>
      {showCommentInput ? (
        <CommentInput
          postId={postDetail.id}
          parentCommentId={null}
          onClose={() => setShowCommentInput(false)}
          onOK={() => {
            setShowCommentInput(false);
            postDetail.comment_count = postDetail.comment_count + 1;
            setPostDetail(postDetail);
          }}
        />
      ) : null}
    </>
  ) : null;
};

export default CommentListInteraction;
