import WwwLevelView, {
  WwwLevelViewLoading,
} from "@/app/[language]/avatar/components/WwwLevelView";
import { GetAvatar } from "@/app/[language]/avatar/query/useGetAvatar";
import useGetAvatarWwwLevels from "@/app/[language]/avatar/query/useGetAvatarWwwLevels";
import { useAvatarStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import ListGroup from "react-bootstrap/ListGroup";
import ListGroupItem from "react-bootstrap/ListGroupItem";

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

  const { isFetched: isWwwLevelsLoaded, data: wwwLevels } =
    useGetAvatarWwwLevels(tabItem === "wwwLevels" ? avatarID : undefined);

  return (
    <ListGroup>
      {isWwwLevelsLoaded ? (
        wwwLevels.map((wwwLevel) => (
          <ListGroupItem key={wwwLevel.levelID}>
            <WwwLevelView {...wwwLevel} />
          </ListGroupItem>
        ))
      ) : (
        <ListGroupItem>
          <WwwLevelViewLoading />
        </ListGroupItem>
      )}
    </ListGroup>
  );
});