"use client";

import EssayTitleView from "@/app/[language]/forum/components/EssayTitleView";
import PositionInput from "@/app/[language]/forum/components/PositionInput";
import Loading from "@/app/[language]/forum/loading";
import useGetForum from "@/app/[language]/forum/query/useGetForum";
import { useTaehuiStore, useForumStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { useParams } from "next/navigation";
import { useEffect } from "react";
import {
  Badge,
  Button,
  Col,
  ListGroup,
  ListGroupItemHeading,
  Row,
} from "reactstrap";
import { useIntParam, useTo } from "taehui-ts/fe-utilities";

export default observer(() => {
  const { taehuiLevel } = useTaehuiStore();
  const { viewUnit, setLastPage } = useForumStore();
  const t = useTranslations();

  const { forumID } = useParams<{
    forumID: string;
  }>();
  const { param: page } = useIntParam("page", 1);

  const to = useTo();

  const {
    data: { title, essays, essayCount, level },
    isFetched: isForumLoaded,
  } = useGetForum(forumID, page, viewUnit);

  useEffect(() => {
    if (isForumLoaded) {
      setLastPage(Math.ceil(essayCount / viewUnit));
    }
  }, [essayCount, isForumLoaded, setLastPage, viewUnit]);

  return (
    <>
      <Row className="g-0">
        <Col className="m-1">
          <ListGroup>
            <ListGroupItemHeading>
              <Badge>{title}</Badge>
            </ListGroupItemHeading>
            {isForumLoaded ? (
              essays.map((essay) => (
                <EssayTitleView
                  forumID={forumID}
                  essay={essay}
                  key={essay.essayID}
                />
              ))
            ) : (
              <Loading />
            )}
          </ListGroup>
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <PositionInput />
        </Col>
      </Row>
      <Row className="g-0">
        {taehuiLevel >= level && (
          <Col className="m-1 text-end">
            <Link href={`/forum/${forumID}/edit`}>
              <Button color="success">{t("postEssay")}</Button>
            </Link>
          </Col>
        )}
        <Col
          className="m-1 text-end"
          xs={taehuiLevel >= level ? "auto" : undefined}
        >
          <Button
            color="danger"
            onClick={() => {
              to("/forums");
            }}
          >
            {t("quit")}
          </Button>
        </Col>
      </Row>
    </>
  );
});