import CommentItem from "@/app/[language]/forum/components/CommentItem";
import useGetComment from "@/app/[language]/forum/query/useGetComment";
import usePostComment from "@/app/[language]/forum/query/usePostComment";
import AvatarTitle from "@/components/AvatarTitle";
import { useTaehuiStore } from "@/state/Stores";
import { GetCommentAPI } from "@/type/wwwAPI";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
import { ReactNode, useMemo, useState } from "react";
import ReactTextareaAutosize from "react-textarea-autosize";
import { toast } from "react-toastify";
import { Badge, Button, Col, Row } from "reactstrap";

export default observer(() => {
  const t = useTranslations();
  const { taehuiAvatarID, taehuiAvatarName, taehuiLevel } = useTaehuiStore();
  const [textInput, setTextInput] = useState("");

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

  const { data: comment } = useGetComment(essayID);
  const { mutateAsync: postComment } = usePostComment();

  const commentComponents = useMemo(() => {
    const commentComponents: ReactNode[] = [];

    const setCommentComponents =
      (level: number) =>
      ({
        commentID,
        avatarID,
        avatarName,
        date,
        text,
        comments,
      }: GetCommentAPI[number]) => {
        commentComponents.push(
          <CommentItem
            commentID={commentID}
            avatarID={avatarID}
            avatarName={avatarName}
            date={date}
            text={text}
            level={level}
          />,
        );

        comments.forEach(setCommentComponents(level + 1));
      };

    comment.forEach((comment) => {
      setCommentComponents(0)(comment);
    });

    return commentComponents;
  }, [comment]);

  return (
    <>
      <Row className="g-0">
        <Col className="m-1">
          <Badge>
            {t("commentCount", { commentCount: commentComponents.length })}
          </Badge>
        </Col>
      </Row>
      {commentComponents}
      {taehuiLevel >= 1 && (
        <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={textInput}
                  onChange={({ target: { value } }) => {
                    setTextInput(value);
                  }}
                />
              </Col>
              <Col className="m-1" xs="auto">
                <Button
                  color="success"
                  onClick={async () => {
                    if (textInput) {
                      await postComment({
                        essayID,
                        targetCommentID: -1,
                        text: textInput,
                      });
                      setTextInput("");
                    } else {
                      toast.error(t("failedValidation"));
                    }
                  }}
                >
                  {t("postComment")}
                </Button>
              </Col>
            </Row>
          </AvatarTitle>
        </Row>
      )}
    </>
  );
});