import { NoteLoading } from "@/Loading";
import NoteItem from "@/note/NoteItem";
import useGetNote from "@/note/useGetNote";

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

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

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

  const { windowLength } = useWindowArea();
  const [table, setTable] = useState(1);

  useLayoutEffect(() => {
    setTable(windowLength < 992 ? 1 : 2);
  }, [windowLength]);

  return (
    <Row className="g-0">
      {[...Array(table).keys()].map((i) => {
        if (isNoteLoaded) {
          return (
            <Col className="m-1" key={i}>
              <ListGroup>
                {notes
                  .slice((viewUnit / table) * i, (viewUnit / table) * (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 / table} />
            </ListGroup>
          </Col>
        );
      })}
    </Row>
  );
});