import { GetAvatar } from "@/app/[language]/avatar/query/useGetAvatar";
import useGetAvatarAbility from "@/app/[language]/avatar/query/useGetAvatarAbility";
import NoteView, {
  NoteViewLoading,
} from "@/app/[language]/note/components/NoteView";

import { useAvatarStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useCallback } from "react";
import ListGroup from "react-bootstrap/ListGroup";
import ListGroupItem from "react-bootstrap/ListGroupItem";
import Tab from "react-bootstrap/Tab";
import Tabs from "react-bootstrap/Tabs";

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

  const { isFetched: isAvatarAbilityLoaded, data: avatarAbility } =
    useGetAvatarAbility(
      abilityTabItem,
      tabItem === "abilities" ? avatarID : undefined,
    );

  const NotesView = useCallback(() => {
    return (
      <ListGroup>
        {isAvatarAbilityLoaded
          ? avatarAbility.map((avatarAbility) => (
              <ListGroupItem key={avatarAbility.noteID}>
                <NoteView {...avatarAbility} wantAvatarID={avatarID} />
              </ListGroupItem>
            ))
          : [...Array(50).keys()].map((i) => (
              <ListGroupItem key={i}>
                <NoteViewLoading />
              </ListGroupItem>
            ))}
      </ListGroup>
    );
  }, [avatarAbility, avatarID, isAvatarAbilityLoaded]);

  return (
    <>
      <Tabs
        activeKey={abilityTabItem}
        onSelect={(eventKey) => {
          if (eventKey) {
            setAbilitiesTabItem(eventKey);
          }
        }}
      >
        <Tab title="⑤K" eventKey="5K">
          <NotesView />
        </Tab>
        <Tab title="⑦K" eventKey="7K">
          <NotesView />
        </Tab>
        <Tab title="9K" eventKey="9K">
          <NotesView />
        </Tab>
      </Tabs>
    </>
  );
});