import { useState } from "react";
import { Button, Col, Input, ListGroup, Row } from "reactstrap";
import { useTranslation } from "react-i18next";
import { toast } from "react-toastify";
import ReactTextareaAutosize from "react-textarea-autosize";

import CommentaryItem from "src/commentary/CommentaryItem";
import { CommentaryViewLoading } from "src/Loading";
import useGetCommentary from "src/commentary/useGetCommentary";
import usePostCommentary from "src/commentary/usePostCommentary";

const CommentaryView = () => {
  const { t } = useTranslation();

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

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

  return (
    <>
      <Row className="g-0">
        <Col className="m-1">
          <Input
            placeholder={t("avatarName")}
            valid={!!avatarName}
            invalid={!avatarName}
            onChange={({ target: { value } }) => {
              setAvatarName(value);
            }}
          />
        </Col>
        <Col className="m-1">
          <Input
            valid={!!avatarCipher}
            invalid={!avatarCipher}
            type="password"
            placeholder={t("avatarCipher")}
            onChange={({ target: { value } }) => {
              setAvatarCipher(value);
            }}
          />
        </Col>
      </Row>
      <Row className="g-0">
        <Col className="m-1">
          <ReactTextareaAutosize
            className="form-control"
            value={textInput}
            placeholder={t("text")}
            onChange={({ target: { value } }) => {
              setTextInput(value);
            }}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <Button
            color="success"
            onClick={async () => {
              if (avatarName && avatarCipher && textInput) {
                await postCommentary({
                  avatarName,
                  avatarCipher,
                  text: textInput,
                });
              } else {
                toast.error(t("failedValidation"));
              }
            }}
          >
            {t("postCommentary")}
          </Button>
        </Col>
      </Row>
      {isCommentaryLoaded ? (
        <Row className="g-0">
          <Col className="m-1">
            <ListGroup>
              {commentary.map((commentary) => (
                <CommentaryItem
                  key={commentary.commentaryID}
                  commentary={commentary}
                />
              ))}
            </ListGroup>
          </Col>
        </Row>
      ) : (
        <CommentaryViewLoading />
      )}
    </>
  );
};

export default CommentaryView;