import { observer } from "mobx-react-lite";
import { ListGroup } from "reactstrap";

import WwwLevelItem from "src/avatar/WwwLevelItem";
import { AvatarWwwLevelLoading } from "src/Loading";
import { GetAvatar } from "src/avatar/useGetAvatar";
import useGetAvatarWwwLevels from "src/avatar/useGetAvatarWwwLevels";
import { useAvatarStore } from "src/Stores";

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}
          />
        ))
      ) : (
        <AvatarWwwLevelLoading loadingCount={1} />
      )}
    </ListGroup>
  );
});