import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";

import { wwwAXIOS } from "src/Www";
import { LatestCommentsViewLoading } from "src/Loading";
import CommentTitleView from "src/forum/CommentTitleView";
import { ListGroup, ListGroupItemHeading } from "reactstrap";
import { GetLatestCommentAPI } from "src/wwwAPI";

const LatestCommentsView = () => {
  const [isLoading, setLoading] = useState(true);
  const [latestComments, setLatestComments] = useState<GetLatestCommentAPI>([]);

  const { t } = useTranslation();

  useEffect(() => {
    (async () => {
      const { status, data } =
        await wwwAXIOS.get<GetLatestCommentAPI>("/comment/latest");

      if (status === 200) {
        setLatestComments(data);
        setLoading(false);
      }
    })();
  }, []);

  return (
    <>
      <ListGroup>
        <ListGroupItemHeading>{t("latestCommentsView")}</ListGroupItemHeading>
        {isLoading ? (
          <LatestCommentsViewLoading />
        ) : (
          latestComments.map((latestComment) => {
            return (
              <CommentTitleView
                key={latestComment.commentID}
                forumID={latestComment.forumID}
                essayID={latestComment.essayID}
                comment={latestComment}
              />
            );
          })
        )}
      </ListGroup>
    </>
  );
};

export default LatestCommentsView;
