import useWipeAutoEssay from "@/app/[language]/forum/query/useWipeAutoEssay";
import { useForumStore } from "@/state/Stores";
import { GetAutoEssayAPI } from "@/type/wwwAPI";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Swal from "sweetalert2";
import { getDatetime } from "taehui-lib/date";

export default observer<{ autoEssay: GetAutoEssayAPI[number] }>(
  ({ autoEssay: { autoEssayID, title, text, date } }) => {
    const { mutateAsync: wipeAutoEssay } = useWipeAutoEssay();

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

    const { setTitle, setText, setAutoEssayID } = useForumStore();
    const t = useTranslations();

    const isLoading = !(autoEssayID >= 0);

    return (
      <Row
        {...(!isLoading && {
          className: "route",
          onClick: async () => {
            const { isConfirmed, isDenied } = await Swal.fire({
              title: "Taehui",
              text: t("autoEssayText"),
              icon: "question",
              showDenyButton: true,
              denyButtonText: t("wipeAutoEssay"),
            });

            if (isConfirmed) {
              setTitle(title);
              setText(text);
              setAutoEssayID(autoEssayID);
            }

            if (isDenied) {
              await wipeAutoEssay({ forumID, autoEssayID });
            }
          },
        })}
      >
        <Col>{title}</Col>
        <Col xs="auto" suppressHydrationWarning>
          {getDatetime(date)}
        </Col>
      </Row>
    );
  },
);