"use client";

import CommentView from "@/app/[language]/forum/components/CommentView";
import EssayTitleView from "@/app/[language]/forum/components/EssayTitleView";
import TextView from "@/app/[language]/forum/components/TextView";
import Loading from "@/app/[language]/forum/loading";
import useGetEssay from "@/app/[language]/forum/query/useGetEssay";
import useWipeEssay from "@/app/[language]/forum/query/useWipeEssay";

import { useTaehuiStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
import { Button, Col, Row } from "reactstrap";
import Swal from "sweetalert2";
import { useTo } from "taehui-ts/fe-utilities";

export default observer(() => {
  const t = useTranslations();

  const { taehuiAvatarID, isSU } = useTaehuiStore();

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

  const to = useTo();

  const { mutateAsync: wipeEssay } = useWipeEssay();

  const {
    data: {
      forumTitle,
      title,
      text,
      avatarID,
      avatarName,
      date,
      hitCount,
      essayLater,
      essayBefore,
    },
    isFetched: isEssayLoaded,
  } = useGetEssay(essayID);

  const onWipeEssay = async () => {
    if (
      (
        await Swal.fire({
          title: "Taehui",
          text: t("wipeEssayQuestion"),
          icon: "question",
          showDenyButton: true,
        })
      ).isConfirmed
    ) {
      await wipeEssay({ essayID });
      to(`/forum/${forumID}`);
    }
  };

  const onQuit = () => {
    to(`/forum/${forumID}`);
  };

  if (!isEssayLoaded) {
    return <Loading />;
  }

  const isAllowModify = isSU || taehuiAvatarID === avatarID;

  return (
    <>
      <Row className="g-0">
        {isAllowModify && (
          <>
            <Col className="m-1" xs="auto">
              <Button color="danger" onClick={onWipeEssay}>
                {t("wipeEssay")}
              </Button>
            </Col>
            <Col className="m-1" xs="auto">
              <Button
                color="warning"
                onClick={() => {
                  to(`/forum/${forumID}/edit/${essayID}`);
                }}
              >
                {t("doModifyEssay")}
              </Button>
            </Col>
          </>
        )}
        <Col className="m-1 text-end">
          <Button color="danger" onClick={onQuit}>
            {t("quit")}
          </Button>
        </Col>
      </Row>
      <hr />
      <TextView
        forumTitle={forumTitle}
        title={title}
        text={text}
        avatarID={avatarID}
        avatarName={avatarName}
        date={date}
        hitCount={hitCount}
      />
      <hr />
      {essayLater && (
        <EssayTitleView
          forumID={forumID}
          forumTitle={t("essayLater")}
          essay={essayLater}
        />
      )}
      {essayBefore && (
        <EssayTitleView
          forumID={forumID}
          forumTitle={t("essayBefore")}
          essay={essayBefore}
        />
      )}
      <hr />
      <CommentView />
    </>
  );
});