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 AvatarDrawing from "@/components/AvatarDrawing";
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 { PencilFill } from "react-bootstrap-icons";
import Button from "react-bootstrap/Button";
import Col from "react-bootstrap/Col";
import FormControl from "react-bootstrap/FormControl";
import InputGroup from "react-bootstrap/InputGroup";
import Row from "react-bootstrap/Row";
import Stack from "react-bootstrap/Stack";
import ReactTextareaAutosize from "react-textarea-autosize";
import { toast } from "react-toastify";

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

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

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

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

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

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

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

    return commentItems;
  }, [comment]);

  return (
    <Stack gap={2}>
      <h4>{t("commentCount", { commentCount: commentItems.length })}</h4>
      <hr />
      {commentItems}
      {taehuiLevel >= 1 && (
        <Row>
          <Col xs="auto">
            <AvatarDrawing avatarID={taehuiAvatarID} />
          </Col>
          <Col>
            {taehuiAvatarName}
            <InputGroup>
              <FormControl
                as={ReactTextareaAutosize}
                placeholder={t("text")}
                value={input}
                onChange={({ target: { value } }) => {
                  setInput(value);
                }}
              />
              <Button
                variant="success"
                onClick={async () => {
                  if (input) {
                    await postComment({
                      essayID,
                      targetCommentID: -1,
                      text: input,
                    });
                    setInput("");
                  } else {
                    toast.error(t("failedValidation"));
                  }
                }}
              >
                <PencilFill />
              </Button>
            </InputGroup>
          </Col>
        </Row>
      )}
    </Stack>
  );
});