"use client";

import CommentaryItem from "@/app/[language]/commentary/components/CommentaryItem";
import useGetCommentary from "@/app/[language]/commentary/query/useGetCommentary";
import usePostCommentary from "@/app/[language]/commentary/query/usePostCommentary";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { PencilFill } from "react-bootstrap-icons";
import Button from "react-bootstrap/Button";
import FormControl from "react-bootstrap/FormControl";
import InputGroup from "react-bootstrap/InputGroup";
import InputGroupText from "react-bootstrap/InputGroupText";
import ListGroup from "react-bootstrap/ListGroup";
import ListGroupItem from "react-bootstrap/ListGroupItem";
import Stack from "react-bootstrap/Stack";
import ReactTextareaAutosize from "react-textarea-autosize";
import { toast } from "react-toastify";
import { getDatetime } from "taehui-ts/date";

export default function Page() {
  const t = useTranslations();

  const [avatarName, setAvatarName] = useState("");
  const [avatarCipher, setAvatarCipher] = useState("");
  const [textInput, setTextInput] = useState("");

  const { data: commentary, isFetched: isCommentaryLoaded } =
    useGetCommentary();
  const { mutateAsync: postCommentary } = usePostCommentary();

  return (
    <Stack gap={2}>
      <InputGroup>
        <InputGroupText>{t("avatarName")}</InputGroupText>
        <FormControl
          type="text"
          value={avatarName}
          isValid={avatarName.length > 0}
          isInvalid={avatarName.length === 0}
          placeholder={t("avatarName")}
          onChange={({ target: { value } }) => setAvatarName(value)}
        />
      </InputGroup>
      <InputGroup>
        <InputGroupText>{t("avatarCipher")}</InputGroupText>
        <FormControl
          type="password"
          value={avatarCipher}
          isInvalid={avatarCipher.length === 0}
          placeholder={t("avatarCipher")}
          onChange={({ target: { value } }) => setAvatarCipher(value)}
        />
      </InputGroup>
      <InputGroup>
        <InputGroupText>{t("text")}</InputGroupText>
        <FormControl
          as={ReactTextareaAutosize}
          value={textInput}
          isValid={textInput.length > 0}
          isInvalid={textInput.length === 0}
          placeholder={t("text")}
          onChange={({ target: { value } }) => setTextInput(value)}
        />
        <Button
          variant="success"
          onClick={async () => {
            if (avatarName && avatarCipher && textInput) {
              await postCommentary({
                avatarName,
                avatarCipher,
                text: textInput,
              });
              setAvatarName("");
              setAvatarCipher("");
              setTextInput("");
            } else {
              toast.error(t("failedValidation"));
            }
          }}
        >
          <PencilFill />
        </Button>
      </InputGroup>
      <hr />
      <ListGroup>
        {isCommentaryLoaded ? (
          commentary.map((commentary) => (
            <ListGroupItem key={commentary.commentaryID}>
              <CommentaryItem commentary={commentary} />
            </ListGroupItem>
          ))
        ) : (
          <ListGroupItem>
            <CommentaryItem
              commentary={{
                commentaryID: -1,
                avatarName: "Loading...",
                text: "",
                date: getDatetime(),
              }}
            />
          </ListGroupItem>
        )}
      </ListGroup>
    </Stack>
  );
}