import { Text, View } from "@tarojs/components";
import { timeFormat } from "../../utils/index";
import CommentInput from "./comment-input";
import { useState } from "react";

const CommentListItem = ({ commentData, isChild = false }) => {
  const [parentCommentId, setParentCommentId] = useState(null);
  const [postId, setPostId] = useState(null);
  const [showCommentInput, setShowCommentInput] = useState(false);

  const handleComment = (parentCommentId, postId) => {
    setParentCommentId(parentCommentId);
    setPostId(postId);
    setShowCommentInput(true);
  };
  return (
    <>
      {commentData ? (
        commentData.map((item) => {
          return (
            <>
              <View
                className={`flex items-start mb-[10px] ${
                  isChild ? "ml-[30px]" : ""
                }`}
                key={item.id}
                onClick={() => {
                  handleComment(item.id, item.post_id);
                }}
              >
                <View className="flex items-center mr-[20rpx]">
                  <View
                    className="w-[35px] h-[35px] rounded-[50%] bg-[#000] overflow-hidden bg-cover bg-center"
                    style={{
                      backgroundImage: item.avatar_url
                        ? `url('${item.avatar_url}')`
                        : "none",
                    }}
                  ></View>
                </View>
                <View>
                  <View className="text-[12px] text-[#909090]">
                    {item.nickname || item.username}
                  </View>
                  <View className="text-[12px] text-[#333] mt-[5px]">
                    {isChild ? (
                      <>
                        回复：
                        <Text className="text-[#909090]">
                          {item.parent_comment_nickname ||
                            item.parent_comment_username}
                        </Text>{" "}
                      </>
                    ) : (
                      ""
                    )}
                    {item.content}
                    <Text className="text-[12px] text-[#949494] ml-[5px]">
                      {timeFormat(item.created_at)} 回复
                    </Text>
                  </View>
                </View>
              </View>
              <View>
                {item.children && item.children.length > 0 && (
                  <CommentListItem commentData={item.children} isChild={true} />
                )}
              </View>
              {showCommentInput && (
                <CommentInput
                  postId={postId}
                  parentCommentId={parentCommentId}
                  onOK={() => {
                    setShowCommentInput(false);
                  }}
                  onClose={() => {
                    setShowCommentInput(false);
                  }}
                />
              )}
            </>
          );
        })
      ) : (
        <></>
      )}
    </>
  );
};

export default CommentListItem;
