import { useEffect } from "react";
import { useParams } from "react-router-dom";
import { Button, Col, Row } from "reactstrap";
import { useTranslation } from "react-i18next";
import { observer } from "mobx-react-lite";
import { useTo } from "taehui-ts/fe-utility";
import { getMillis } from "taehui-ts/date";
import Swal from "sweetalert2";

import { wwwAXIOS } from "src/Www";
import { useAvatarStore, useForumStore } from "src/Stores";
import TextView from "src/forum/TextView";
import CommentView from "src/forum/CommentView";
import EssayTitleView from "src/forum/EssayTitleView";
import { EssayViewLoading } from "src/Loading";
import useGetEssay from "src/forum/useGetEssay";

const EssayView = observer(() => {
  const { t } = useTranslation();

  const { title, text, setTitle, setText } = useForumStore();
  const { taehuiAvatarID, totem, isTaehui } = useAvatarStore();

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

  const to = useTo();

  const { data: essay, isFetched: isEssayLoaded } = useGetEssay(essayID);

  useEffect(() => {
    if (isEssayLoaded) {
      setTitle(essay.title);
      setText(essay.text);
    }
  }, [essay, isEssayLoaded, setText, setTitle]);

  const onWipeEssay = async () => {
    if (
      (
        await Swal.fire({
          title: "Taehui",
          text: t("wipeEssayQuestion"),
          icon: "question",
          showDenyButton: true,
        })
      ).isConfirmed
    ) {
      const { status } = await wwwAXIOS.delete(`/essay/${essayID}`, {
        headers: {
          millis: getMillis(),
          totem,
        },
      });
      if (status === 204) {
        to(`/forum/${forumID}`);
      }
    }
  };

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

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

  const { avatarID, avatarName, date, hitCount, essayLater, essayBefore } =
    essay;

  const isAllowModify = isTaehui || 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}/${essayID}/m`);
                }}
              >
                {t("doModifyEssay")}
              </Button>
            </Col>
          </>
        )}
        <Col className="m-1 text-end">
          <Button color="danger" onClick={onQuit}>
            {t("quit")}
          </Button>
        </Col>
      </Row>
      <hr />
      <TextView
        forumTitle={essay.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 />
    </>
  );
});

export default EssayView;