import { observer } from "mobx-react-lite";
import { Col, ListGroup, Row } from "reactstrap";
import { useWindowArea } from "taehui-ts/fe-utility";

import { useNoteStore } from "src/Stores";
import NoteItem from "src/note/NoteItem";
import { NoteLoading } from "src/Loading";

export default observer(() => {
  const { notes, wantAvatar, viewUnit, isLoading } = useNoteStore();

  const line = useWindowArea().windowLength < 992 ? 1 : 2;

  return (
    <Row className="g-0">
      {[...Array(line).keys()].map((i) => {
        if (isLoading) {
          return (
            <Col className="m-1" key={i}>
              <ListGroup>
                <NoteLoading loadingCount={viewUnit / line} />
              </ListGroup>
            </Col>
          );
        }

        return (
          <Col className="m-1" key={i}>
            <ListGroup>
              {notes
                .slice((viewUnit / line) * i, (viewUnit / line) * (i + 1))
                .map(
                  ({
                    noteID,
                    artist,
                    title,
                    genre,
                    levelText,
                    level,
                    highestCount,
                    totalCount,
                  }) => (
                    <NoteItem
                      key={noteID}
                      noteID={noteID}
                      artist={artist}
                      title={title}
                      genre={genre}
                      levelText={levelText}
                      level={level}
                      highestCount={highestCount}
                      totalCount={totalCount}
                      wantAvatarName={wantAvatar}
                    />
                  ),
                )}
            </ListGroup>
          </Col>
        );
      })}
    </Row>
  );
});