import { Col, Row } from "reactstrap";
import { useParams } from "react-router-dom";
import { useWindowArea } from "taehui-ts/fe-utility";

import ForumItem from "src/forum/ForumItem";
import { ForumsViewLoading } from "src/Loading";
import useGetForums from "src/forum/useGetForums";

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

  type ForumsViewParams = { forumGroup: string };
  const { forumGroup } = useParams<ForumsViewParams>() as ForumsViewParams;

  const { data: forums, isFetched: isForumsLoaded } = useGetForums(forumGroup);

  if (!isForumsLoaded) {
    return <ForumsViewLoading />;
  }

  return (
    <>
      {[...Array(Math.ceil(forums.length / line)).keys()].map((i) => (
        <Row key={i} className="g-0">
          {forums.slice(line * i, line * i + line).map((forum) => (
            <Col key={forum.forumID} className="m-1">
              <ForumItem forum={forum} />
            </Col>
          ))}
        </Row>
      ))}
    </>
  );
};

export default ForumsView;