import { observer } from "mobx-react-lite";
import { useTranslation } from "react-i18next";
import { Badge, Col, ListGroup, Row } from "reactstrap";

import { useAvatarStore } from "src/Stores";
import NoteItem from "src/note/NoteItem";
import { AvatarLoading } from "../Loading";

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

  const { avatarID } = useAvatarStore();

  return (
    <Row className="g-0">
      <Col className="m-1" xs="auto">
        <ListGroup>
          <Badge color="primary">{t("avatarLasts5KText")}</Badge>
          {isLasts5KLoading ? (
            <AvatarLoading />
          ) : (
            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>
      </Col>
      <Col className="m-1" xs="auto">
        <ListGroup>
          <Badge color="primary">{t("avatarLasts7KText")}</Badge>
          {isLasts7KLoading ? (
            <AvatarLoading />
          ) : (
            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>
      </Col>
      <Col className="m-1" xs="auto">
        <ListGroup>
          <Badge color="primary">{t("avatarLasts9KText")}</Badge>
          {isLasts9KLoading ? (
            <AvatarLoading />
          ) : (
            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>
      </Col>
      <Col className="m-1" xs="auto">
        <ListGroup>
          <Badge color="primary">{t("avatarLasts10KText")}</Badge>
          {isLasts10KLoading ? (
            <AvatarLoading />
          ) : (
            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>
      </Col>
      <Col className="m-1" xs="auto">
        <ListGroup>
          <Badge color="primary">{t("avatarLasts14KText")}</Badge>
          {isLasts14KLoading ? (
            <AvatarLoading />
          ) : (
            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>
      </Col>
      <Col className="m-1" xs="auto">
        <ListGroup>
          <Badge color="primary">{t("avatarLasts24KText")}</Badge>
          {isLasts24KLoading ? (
            <AvatarLoading />
          ) : (
            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>
      </Col>
      <Col className="m-1" xs="auto">
        <ListGroup>
          <Badge color="primary">{t("avatarLasts48KText")}</Badge>
          {isLasts48KLoading ? (
            <AvatarLoading />
          ) : (
            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>
      </Col>
    </Row>
  );
});