import { useCallback } from "react";
import { observer } from "mobx-react-lite";
import {
  ListGroup,
  Nav,
  NavItem,
  NavLink,
  TabContent,
  TabPane,
} from "reactstrap";

import { useAvatarStore } from "src/Stores";
import NoteItem from "src/note/NoteItem";
import { NoteLoading } from "src/Loading";
import { Note } from "src/avatar/Avatar";

export default observer(() => {
  const {
    favorites6K,
    favorites5K,
    favorites7K,
    favorites9K,
    favorites10K,
    favorites14K,
    favorites24K,
    favorites48K,
    isFavorites6KLoading,
    isFavorites5KLoading,
    isFavorites7KLoading,
    isFavorites9KLoading,
    isFavorites10KLoading,
    isFavorites14KLoading,
    isFavorites24KLoading,
    isFavorites48KLoading,
    avatarID,
    favoritesTabPosition,
    setFavoritesTabPosition,
  } = useAvatarStore();

  const getProperties = (i: number) => ({
    className: favoritesTabPosition === i ? "active route" : "route",
    onClick: () => {
      setFavoritesTabPosition(i);
    },
  });

  const FavoriteView = useCallback(
    ({
      tabPosition,
      isFavoritesLoading,
      favorites,
    }: {
      tabPosition: number;
      isFavoritesLoading: boolean;
      favorites: Note[];
    }) => {
      return (
        <TabPane tabId={tabPosition}>
          <ListGroup>
            {isFavoritesLoading ? (
              <NoteLoading loadingCount={50} />
            ) : (
              favorites.map((favorite) => (
                <NoteItem
                  {...favorite}
                  key={favorite.noteID}
                  wantAvatarID={avatarID}
                />
              ))
            )}
          </ListGroup>
        </TabPane>
      );
    },
    [avatarID],
  );

  return (
    <>
      <Nav tabs>
        <NavItem>
          <NavLink {...getProperties(0)}>6K</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(1)}>⑤K</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(2)}>⑦K</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(3)}>9K</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(4)}>⑩K</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(5)}>⑭K</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(6)}>24</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(7)}>48</NavLink>
        </NavItem>
      </Nav>
      <TabContent activeTab={favoritesTabPosition}>
        <FavoriteView
          tabPosition={0}
          isFavoritesLoading={isFavorites6KLoading}
          favorites={favorites6K}
        />
        <FavoriteView
          tabPosition={1}
          isFavoritesLoading={isFavorites5KLoading}
          favorites={favorites5K}
        />
        <FavoriteView
          tabPosition={2}
          isFavoritesLoading={isFavorites7KLoading}
          favorites={favorites7K}
        />
        <FavoriteView
          tabPosition={3}
          isFavoritesLoading={isFavorites9KLoading}
          favorites={favorites9K}
        />
        <FavoriteView
          tabPosition={4}
          isFavoritesLoading={isFavorites10KLoading}
          favorites={favorites10K}
        />
        <FavoriteView
          tabPosition={5}
          isFavoritesLoading={isFavorites14KLoading}
          favorites={favorites14K}
        />
        <FavoriteView
          tabPosition={6}
          isFavoritesLoading={isFavorites24KLoading}
          favorites={favorites24K}
        />
        <FavoriteView
          tabPosition={7}
          isFavoritesLoading={isFavorites48KLoading}
          favorites={favorites48K}
        />
      </TabContent>
    </>
  );
});