import { GetAvatar } from "@/app/[language]/avatar/query/useGetAvatar";
import useGetAvatarFavorites from "@/app/[language]/avatar/query/useGetAvatarFavorites";
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, favoritesTabItem, setFavoritesTabItem } = useAvatarStore();

  const { isFetched: isAvatarFavoritesLoaded, data: avatarFavorites } =
    useGetAvatarFavorites(
      favoritesTabItem,
      tabItem === "favorites" ? avatarID : undefined,
    );

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

  return (
    <>
      <Tabs
        activeKey={favoritesTabItem}
        onSelect={(eventKey) => {
          if (eventKey) {
            setFavoritesTabItem(eventKey);
          }
        }}
      >
        <Tab title="6K" eventKey="6K">
          <NotesView />
        </Tab>
        <Tab title="⑤K" eventKey="5K">
          <NotesView />
        </Tab>
        <Tab title="⑦K" eventKey="7K">
          <NotesView />
        </Tab>
        <Tab title="9K" eventKey="9K">
          <NotesView />
        </Tab>
        <Tab title="⑩K" eventKey="10K">
          <NotesView />
        </Tab>
        <Tab title="⑭K" eventKey="14K">
          <NotesView />
        </Tab>
        <Tab title="24" eventKey="24K">
          <NotesView />
        </Tab>
        <Tab title="48" eventKey="48K">
          <NotesView />
        </Tab>
      </Tabs>
    </>
  );
});