import { useEffect, useMemo, useState } 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 Swal from "sweetalert2";
import { useTo } from "taehui-ts/fe-utility";
import { getLanguage } from "taehui-ts/language";
import { getMillis } from "taehui-ts/date";

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 { EssayLoading } from "src/Loading";
import { GetCommentAPI, GetEssayAPI } from "src/wwwAPI";

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

  const {
    forumTitle,
    avatarID,
    avatarName,
    title,
    text,
    hitCount,
    essayBefore,
    essayLater,
    setForumTitle,
    setAvatarID,
    setAvatarName,
    setTitle,
    setText,
    setHitCount,
    setEssayBefore,
    setEssayLater,
    setComments,
  } = useForumStore();
  const { taehuiAvatarID, totem, isTaehui } = useAvatarStore();

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

  const [isLoading, setLoading] = useState(true);
  const [date, setDate] = useState("");

  const to = useTo();

  useEffect(() => {
    (async () => {
      const { data, status } = await wwwAXIOS.get<GetEssayAPI>(
        `/essay/${essayID}`,
        {
          params: { language: getLanguage() },
        },
      );
      if (status === 200) {
        setForumTitle(data.forumTitle);
        setTitle(data.title);
        setText(data.text);
        setDate(data.date);
        setAvatarID(data.avatarID);
        setAvatarName(data.avatarName);
        setHitCount(data.hitCount);
        setEssayBefore(data.essayBefore);
        setEssayLater(data.essayLater);
        setLoading(false);
      }
    })();
  }, [
    essayID,
    setAvatarID,
    setAvatarName,
    setEssayBefore,
    setEssayLater,
    setForumTitle,
    setHitCount,
    setText,
    setTitle,
  ]);

  useEffect(() => {
    (async () => {
      const { data, status } = await wwwAXIOS.get<GetCommentAPI>(
        `/comment/${essayID}`,
      );
      if (status === 200) {
        setComments(data);
      }
    })();
  }, [essayID, setComments]);

  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}`);
  };

  const isAllowModify = useMemo(
    () => isTaehui || taehuiAvatarID === avatarID,
    [isTaehui, avatarID, taehuiAvatarID],
  );

  if (isLoading) {
    return <EssayLoading />;
  }

  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={forumTitle}
        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 />
    </>
  );
});

export default EssayView;