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

  const { isFetched: isAvatarLastsLoaded, data: avatarLasts } =
    useGetAvatarLasts(lastsTabItem, tabItem === "lasts" ? avatarID : undefined);

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

  return (
    <>
      <Tabs
        activeKey={lastsTabItem}
        onSelect={(eventKey) => {
          if (eventKey) {
            setLastsTabItem(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>
    </>
  );
});
