import { CommentAPIComment } from "src/wwwAPI";
import CommentItem from "src/note/CommentItem";
import { formatText } from "src/Utility";

export default function CommentItems({
  comments,
  commentPlace,
  totalCount,
  wantAvatarID,
  wantAvatarName,
}: {
  comments: CommentAPIComment[];
  commentPlace: number;
  totalCount: number;
  wantAvatarID?: string;
  wantAvatarName?: string;
}) {
  return (
    <>
      {commentPlace !== -1 && (
        <>
          <span className="avatarPlace">＃{formatText(commentPlace + 1)}</span>
          <span>／{formatText(totalCount)}</span>
        </>
      )}
      {comments.map(
        ({
          date,
          avatarID,
          avatarName,
          stand,
          band,
          point,
          commentary,
          isP,
          judgmentMode,
          hitPointsMode,
          isPaused,
          handled,
        }) => (
          <CommentItem
            key={avatarID}
            date={date}
            avatarID={avatarID}
            avatarName={avatarName}
            stand={stand}
            band={band}
            point={point}
            isP={isP}
            commentary={commentary}
            isTargetAvatar={
              !!(wantAvatarID && wantAvatarID === avatarID) ||
              !!(wantAvatarName && wantAvatarName === avatarName)
            }
            judgmentMode={judgmentMode}
            hitPointsMode={hitPointsMode}
            isPaused={isPaused}
            handled={handled}
          />
        ),
      )}
    </>
  );
}