import AutoEssayTitleView from "@/app/[language]/forum/components/AutoEssayTitleView";
import useGetAutoEssay from "@/app/[language]/forum/query/useGetAutoEssay";
import { useForumStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useParams } from "next/navigation";
import ListGroup from "react-bootstrap/ListGroup";
import ListGroupItem from "react-bootstrap/ListGroupItem";
import Modal from "react-bootstrap/Modal";
import ModalBody from "react-bootstrap/ModalBody";
import { getDatetime } from "taehui-lib/date";

export default observer(() => {
  const { isAutoEssayOpened, setAutoEssayOpened } = useForumStore();

  const { forumID } = useParams<{
    forumID: string;
  }>();

  const { isFetched: isAutoEssayLoaded, data: autoEssay } = useGetAutoEssay(
    forumID,
    isAutoEssayOpened,
  );

  return (
    <Modal
      show={isAutoEssayOpened}
      onHide={() => {
        setAutoEssayOpened(false);
      }}
    >
      <ModalBody>
        <ListGroup>
          {isAutoEssayLoaded ? (
            autoEssay.map((autoEssay) => (
              <ListGroupItem key={autoEssay.autoEssayID}>
                <AutoEssayTitleView autoEssay={autoEssay} />
              </ListGroupItem>
            ))
          ) : (
            <ListGroupItem>
              <AutoEssayTitleView
                autoEssay={{
                  autoEssayID: -1,
                  title: "Loading...",
                  text: "",
                  date: getDatetime(),
                }}
              />
            </ListGroupItem>
          )}
        </ListGroup>
      </ModalBody>
    </Modal>
  );
});