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 {
    favorites5K,
    favorites7K,
    favorites9K,
    favorites10K,
    favorites14K,
    favorites24K,
    favorites48K,
    isFavorites5KLoading,
    isFavorites7KLoading,
    isFavorites9KLoading,
    isFavorites10KLoading,
    isFavorites14KLoading,
    isFavorites24KLoading,
    isFavorites48KLoading,
    avatarID,
  } = useAvatarStore();
  const { t } = useTranslation();

  return (
    <Row className="g-0">
      <Col className="m-1" xs="auto">
        <ListGroup>
          <Badge color="primary">{t("avatarFavorites5KText")}</Badge>
          {isFavorites5KLoading ? (
            <AvatarLoading />
          ) : (
            favorites5K.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("avatarFavorites7KText")}</Badge>
          {isFavorites7KLoading ? (
            <AvatarLoading />
          ) : (
            favorites7K.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("avatarFavorites9KText")}</Badge>
          {isFavorites9KLoading ? (
            <AvatarLoading />
          ) : (
            favorites9K.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("avatarFavorites10KText")}</Badge>
          {isFavorites10KLoading ? (
            <AvatarLoading />
          ) : (
            favorites10K.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("avatarFavorites14KText")}</Badge>
          {isFavorites14KLoading ? (
            <AvatarLoading />
          ) : (
            favorites14K.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("avatarFavorites24KText")}</Badge>
          {isFavorites24KLoading ? (
            <AvatarLoading />
          ) : (
            favorites24K.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("avatarFavorites48KText")}</Badge>
          {isFavorites48KLoading ? (
            <AvatarLoading />
          ) : (
            favorites48K.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>
  );
});