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";

export default observer(() => {
  const {
    lasts5K,
    lasts7K,
    lasts9K,
    lasts10K,
    lasts14K,
    lasts24K,
    lasts48K,
    isLasts5KLoading,
    isLasts7KLoading,
    isLasts9KLoading,
    isLasts10KLoading,
    isLasts14KLoading,
    isLasts24KLoading,
    isLasts48KLoading,
    lastsTabPosition,
    setLastsTabPosition,
  } = useAvatarStore();
  const { avatarID } = useAvatarStore();

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

  return (
    <>
      <Nav tabs>
        <NavItem>
          <NavLink {...getProperties(0)}>⑤K</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(1)}>⑦K</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(2)}>9K</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(3)}>⑩K</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(4)}>⑭K</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(5)}>24</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(6)}>48</NavLink>
        </NavItem>
      </Nav>
      <TabContent activeTab={lastsTabPosition}>
        <TabPane tabId={0}>
          <ListGroup>
            {isLasts5KLoading ? (
              <NoteLoading loadingCount={10} />
            ) : (
              lasts5K.map(
                ({
                  noteID,
                  artist,
                  title,
                  genre,
                  levelText,
                  level,
                  fittedText,
                }) => (
                  <NoteItem
                    key={noteID}
                    noteID={noteID}
                    artist={artist}
                    title={title}
                    genre={genre}
                    levelText={levelText}
                    level={level}
                    fittedText={fittedText}
                    wantAvatarID={avatarID}
                  />
                ),
              )
            )}
          </ListGroup>
        </TabPane>
        <TabPane tabId={1}>
          <ListGroup>
            {isLasts7KLoading ? (
              <NoteLoading loadingCount={10} />
            ) : (
              lasts7K.map(
                ({
                  noteID,
                  artist,
                  title,
                  genre,
                  levelText,
                  level,
                  fittedText,
                }) => (
                  <NoteItem
                    key={noteID}
                    noteID={noteID}
                    artist={artist}
                    title={title}
                    genre={genre}
                    levelText={levelText}
                    level={level}
                    fittedText={fittedText}
                    wantAvatarID={avatarID}
                  />
                ),
              )
            )}
          </ListGroup>
        </TabPane>
        <TabPane tabId={2}>
          <ListGroup>
            {isLasts9KLoading ? (
              <NoteLoading loadingCount={10} />
            ) : (
              lasts9K.map(
                ({
                  noteID,
                  artist,
                  title,
                  genre,
                  levelText,
                  level,
                  fittedText,
                }) => (
                  <NoteItem
                    key={noteID}
                    noteID={noteID}
                    artist={artist}
                    title={title}
                    genre={genre}
                    levelText={levelText}
                    level={level}
                    fittedText={fittedText}
                    wantAvatarID={avatarID}
                  />
                ),
              )
            )}
          </ListGroup>
        </TabPane>
        <TabPane tabId={3}>
          <ListGroup>
            {isLasts10KLoading ? (
              <NoteLoading loadingCount={10} />
            ) : (
              lasts10K.map(
                ({
                  noteID,
                  artist,
                  title,
                  genre,
                  levelText,
                  level,
                  fittedText,
                }) => (
                  <NoteItem
                    key={noteID}
                    noteID={noteID}
                    artist={artist}
                    title={title}
                    genre={genre}
                    levelText={levelText}
                    level={level}
                    fittedText={fittedText}
                    wantAvatarID={avatarID}
                  />
                ),
              )
            )}
          </ListGroup>
        </TabPane>
        <TabPane tabId={4}>
          <ListGroup>
            {isLasts14KLoading ? (
              <NoteLoading loadingCount={10} />
            ) : (
              lasts14K.map(
                ({
                  noteID,
                  artist,
                  title,
                  genre,
                  levelText,
                  level,
                  fittedText,
                }) => (
                  <NoteItem
                    key={noteID}
                    noteID={noteID}
                    artist={artist}
                    title={title}
                    genre={genre}
                    levelText={levelText}
                    level={level}
                    fittedText={fittedText}
                    wantAvatarID={avatarID}
                  />
                ),
              )
            )}
          </ListGroup>
        </TabPane>
        <TabPane tabId={5}>
          <ListGroup>
            {isLasts24KLoading ? (
              <NoteLoading loadingCount={10} />
            ) : (
              lasts24K.map(
                ({
                  noteID,
                  artist,
                  title,
                  genre,
                  levelText,
                  level,
                  fittedText,
                }) => (
                  <NoteItem
                    key={noteID}
                    noteID={noteID}
                    artist={artist}
                    title={title}
                    genre={genre}
                    levelText={levelText}
                    level={level}
                    fittedText={fittedText}
                    wantAvatarID={avatarID}
                  />
                ),
              )
            )}
          </ListGroup>
        </TabPane>
        <TabPane tabId={6}>
          <ListGroup>
            {isLasts48KLoading ? (
              <NoteLoading loadingCount={10} />
            ) : (
              lasts48K.map(
                ({
                  noteID,
                  artist,
                  title,
                  genre,
                  levelText,
                  level,
                  fittedText,
                }) => (
                  <NoteItem
                    key={noteID}
                    noteID={noteID}
                    artist={artist}
                    title={title}
                    genre={genre}
                    levelText={levelText}
                    level={level}
                    fittedText={fittedText}
                    wantAvatarID={avatarID}
                  />
                ),
              )
            )}
          </ListGroup>
        </TabPane>
      </TabContent>
    </>
  );
});
