import { View } from "@tarojs/components";
import CommentListItem from "./item";
import { useEffect, useState } from "react";
import { getCommentListApi } from "../../api/comment";

const CommentList = ({ postId }) => {
  // const CommentList = ({ commentsData }) => {
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [commentsData, setCommentsData] = useState<any[]>([]);
  const [count, setCount] = useState(0);
  // useEffect(() => {
  //   getCommentListApi({ post_id: postId }).then((res: any) => {
  //     if (res.code === 200) {
  //       setCommentsData(res.data.list);
  //       setCount(res.data.count);
  //       setHasMore(res.data.has_more);
  //     }
  //   });
  // }, [postId]);

  // 加载更多
  const handleLoadMore = () => {
    setPage(page + 1);
  };

  useEffect(() => {
    getCommentListApi({ post_id: postId, page: page, limit: 10 }).then(
      (res: any) => {
        if (res.code === 200) {
          setCommentsData([...commentsData, ...res.data.list]);
          setCount(res.data.count);
          setHasMore(res.data.has_more);
        }
      }
    );
  }, [page, postId]);

  return (
    <View>
      <View className="text-[14px] text-[#949494] mt-[20px]">
        共 {count} 条评论
      </View>
      <View className="mt-[10px] pb-[100px]">
        <CommentListItem commentData={commentsData} />
        {hasMore && (
          <View
            className="text-[14px] text-[#1874d0] mt-[10px] text-center"
            onClick={() => {
              handleLoadMore();
            }}
          >
            加载更多
          </View>
        )}
      </View>
    </View>
  );
};

export default CommentList;
