import { GetAvatar } from "@/avatar/useGetAvatar";
import useGetAvatarWwwLevels from "@/avatar/useGetAvatarWwwLevels";

import WwwLevelItem from "@/avatar/WwwLevelItem";
import { WwwLevelLoading } from "@/Loading";
import { useAvatarStore } from "@/Stores";
import { observer } from "mobx-react-lite";
import { ListGroup } from "reactstrap";

export default observer(({ avatar: { avatarID } }: { avatar: GetAvatar }) => {
  const { tabPosition } = useAvatarStore();

  const { isFetched: isAvatarWwwLevelsLoaded, data: avatarWwwLevels } =
    useGetAvatarWwwLevels(tabPosition === 3 ? avatarID : undefined);

  return (
    <ListGroup>
      {isAvatarWwwLevelsLoaded ? (
        avatarWwwLevels.map(({ levelID, title, levelText, level, date }) => (
          <WwwLevelItem
            key={levelID}
            levelID={levelID}
            title={title}
            levelText={levelText}
            level={level}
            date={date}
          />
        ))
      ) : (
        <WwwLevelLoading loadingCount={1} />
      )}
    </ListGroup>
  );
});