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";
import useGetNote from "./useGetNote";

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

  const {
    data: { notes },
    isFetched: isNoteLoaded,
  } = useGetNote();

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

  return (
    <Row className="g-0">
      {[...Array(line).keys()].map((i) => {
        if (isNoteLoaded) {
          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>
          );
        }

        return (
          <Col className="m-1" key={i}>
            <ListGroup>
              <NoteLoading loadingCount={viewUnit / line} />
            </ListGroup>
          </Col>
        );
      })}
    </Row>
  );
});