import usePostComment from "@/app/[language]/forum/query/usePostComment";
import usePutComment from "@/app/[language]/forum/query/usePutComment";
import useWipeComment from "@/app/[language]/forum/query/useWipeComment";
import AvatarTitle from "@/components/AvatarTitle";
import { useTaehuiStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
import { useMemo, useState } from "react";
import ReactTextareaAutosize from "react-textarea-autosize";
import { toast } from "react-toastify";
import { Button, Col, Collapse, Row } from "reactstrap";
import Swal from "sweetalert2";
import { getDatetime } from "taehui-ts/date";

export default observer(
  ({
    commentID,
    text,
    avatarID,
    avatarName,
    date,
    level,
  }: {
    commentID: number;
    text: string;
    date: string;
    avatarID: string;
    avatarName: string;
    level: number;
  }) => {
    const t = useTranslations();
    const { totem, taehuiAvatarID, taehuiAvatarName, isSU } = useTaehuiStore();

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

    const [textInput, setTextInput] = useState("");
    const [targetTextInput, setTargetTextInput] = useState("");
    const [isTargetOpened, setTargetOpened] = useState(false);

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

    const { mutateAsync: wipeComment } = useWipeComment();
    const { mutateAsync: putComment } = usePutComment();
    const { mutateAsync: postComment } = usePostComment();

    return (
      <div style={{ marginLeft: `${level * 3.5}rem` }}>
        <Row
          key={commentID}
          className="g-0 route"
          onClick={() => {
            if (totem && !isTargetOpened) {
              setTargetOpened(true);
            }
          }}
        >
          <AvatarTitle avatarID={avatarID} avatarName={avatarName}>
            {isTargetOpened && isAllowModify ? (
              <Row className="g-0">
                <Col className="m-1">
                  <ReactTextareaAutosize
                    className="form-control"
                    placeholder={t("text")}
                    defaultValue={text}
                    onChange={({ target: { value } }) => {
                      setTextInput(value);
                    }}
                  />
                </Col>
                <Col className="m-1" xs="auto">
                  <Button
                    color="warning"
                    onClick={async () => {
                      if (textInput) {
                        await putComment({ commentID, text: textInput });
                        setTargetOpened(false);
                      } else {
                        toast.error(t("failedValidation"));
                      }
                    }}
                  >
                    {t("doModifyComment")}
                  </Button>
                </Col>
                <Col className="m-1" xs="auto">
                  <Button
                    color="danger"
                    onClick={async () => {
                      if (
                        (
                          await Swal.fire({
                            title: "Taehui",
                            text: t("wipeCommentQuestion"),
                            icon: "question",
                            showDenyButton: true,
                          })
                        ).isConfirmed
                      ) {
                        await wipeComment({ commentID, totem });
                      }
                    }}
                  >
                    {t("wipeComment")}
                  </Button>
                </Col>
              </Row>
            ) : (
              <span className="ln">{text}</span>
            )}
          </AvatarTitle>
          <Col className="m-1" xs="auto">
            <span>{getDatetime(date)}</span>
          </Col>
        </Row>
        <Collapse isOpen={isTargetOpened} style={{ marginLeft: "3.5rem" }}>
          <Row className="g-0">
            <AvatarTitle
              avatarID={taehuiAvatarID}
              avatarName={taehuiAvatarName}
            >
              <Row className="g-0">
                <Col className="m-1">
                  <ReactTextareaAutosize
                    className="form-control"
                    placeholder={t("text")}
                    value={targetTextInput}
                    onChange={({ target: { value } }) => {
                      setTargetTextInput(value);
                    }}
                  />
                </Col>
                <Col className="m-1" xs="auto">
                  <Button
                    color="success"
                    onClick={async () => {
                      if (targetTextInput) {
                        await postComment({
                          essayID,
                          targetCommentID: commentID,
                          text: targetTextInput,
                        });
                        setTargetOpened(false);
                      } else {
                        toast.error(t("failedValidation"));
                      }
                    }}
                  >
                    {t("postComment")}
                  </Button>
                </Col>
              </Row>
            </AvatarTitle>
          </Row>
        </Collapse>
      </div>
    );
  },
);