"use client";

import CommentView from "@/app/[language]/forum/components/CommentView";
import TextView from "@/app/[language]/forum/components/TextView";
import useGetEssay from "@/app/[language]/forum/query/useGetEssay";
import useWipeEssay from "@/app/[language]/forum/query/useWipeEssay";
import EssayTitleView from "@/components/EssayTitleView";
import { useTaehuiStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { useParams, useRouter } from "next/navigation";
import { Back, EraserFill, PencilFill } from "react-bootstrap-icons";
import Button from "react-bootstrap/Button";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Stack from "react-bootstrap/Stack";
import Swal from "sweetalert2";

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

  const { taehuiAvatarID, isSU } = useTaehuiStore();

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

  const { push } = useRouter();

  const { mutateAsync: wipeEssay } = useWipeEssay();

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

  if (!isEssayLoaded) {
    return null;
  }

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

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

  return (
    <Stack gap={2}>
      <Row>
        <Col>
          <h4>{forumTitle}</h4>
        </Col>
        <Col xs="auto">
          <ButtonGroup>
            {isAllowModify && (
              <>
                <Button variant="danger" onClick={onWipeEssay}>
                  <EraserFill />
                </Button>
                <Button
                  variant="warning"
                  onClick={() => {
                    push(`/forum/${forumID}/edit/${essayID}`);
                  }}
                >
                  <PencilFill />
                </Button>
              </>
            )}
            <Button
              variant="secondary"
              onClick={() => {
                push(`/forum/${forumID}`);
              }}
            >
              <Back />
            </Button>
          </ButtonGroup>
        </Col>
      </Row>
      <hr />
      <TextView
        title={title}
        text={text}
        avatarID={avatarID}
        avatarName={avatarName}
        date={date}
        hitCount={hitCount}
      />
      {(essayLater || essayBefore) && (
        <>
          <hr />
          {essayLater && (
            <EssayTitleView
              forumID={forumID}
              forumTitle={t("essayLater")}
              essay={essayLater}
            />
          )}
          {essayBefore && (
            <EssayTitleView
              forumID={forumID}
              forumTitle={t("essayBefore")}
              essay={essayBefore}
            />
          )}
        </>
      )}
      <hr />
      <CommentView />
    </Stack>
  );
});