import { useMemo } from "react";
import { observer } from "mobx-react-lite";

import { CommentAPIComment } from "src/wwwAPI";
import CommentItem from "src/note/CommentItem";
import { formatText, getDefaultAvatarID } from "src/Utility";
import { useSiteStore } from "src/Stores";

export default observer(
  ({
    comments,
    wantAvatarID,
    wantAvatarName,
  }: {
    comments: CommentAPIComment[];
    wantAvatarID?: string;
    wantAvatarName?: string;
  }) => {
    const { siteAvatarID } = useSiteStore();

    const avatarPlace = useMemo(
      () =>
        comments.findIndex(
          ({ avatarID }) => avatarID === getDefaultAvatarID(siteAvatarID),
        ) + 1,
      [comments, siteAvatarID],
    );

    return (
      <>
        {avatarPlace > 0 && (
          <>
            <span className="avatarPlace">＃{formatText(avatarPlace)}</span>
            <span>／{formatText(comments.length)}</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}
            />
          ),
        )}
      </>
    );
  },
);