import { useEffect, useState } from "react";
import { Button, Col, Input, ListGroup, Row } from "reactstrap";
import { useTranslation } from "react-i18next";
import { toast } from "react-toastify";
import { getMillis } from "taehui-ts/date";

import { wwwAXIOS } from "src/Www";
import CommentaryItem from "src/commentary/CommentaryItem";
import ReactTextareaAutosize from "react-textarea-autosize";
import { CommentaryViewLoading } from "src/Loading";
import { GetCommentaryAPI } from "src/wwwAPI";

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

  const [isLoading, setLoading] = useState(true);
  const [commentary, setCommentary] = useState<GetCommentaryAPI>([]);
  const [avatarName, setAvatarName] = useState("");
  const [avatarCipher, setAvatarCipher] = useState("");
  const [inputText, setInputText] = useState("");

  useEffect(() => {
    (async () => {
      const { data, status } =
        await wwwAXIOS.get<GetCommentaryAPI>("/commentary");
      if (status === 200) {
        setCommentary(data);
        setLoading(false);
      }
    })();
  }, []);

  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={inputText}
            placeholder={t("text")}
            onChange={({ target: { value } }) => {
              setInputText(value);
            }}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <Button
            color="success"
            onClick={async () => {
              if (avatarName && avatarCipher && inputText) {
                const { status } = await wwwAXIOS.post(
                  `/commentary`,
                  {
                    avatarName,
                    avatarCipher,
                    text: inputText,
                  },
                  {
                    headers: {
                      millis: getMillis(),
                    },
                  },
                );
                if (status === 201) {
                  window.location.reload();
                }
              } else {
                toast.error(t("failedValidation"));
              }
            }}
          >
            {t("postCommentary")}
          </Button>
        </Col>
      </Row>
      {isLoading ? (
        <CommentaryViewLoading />
      ) : (
        <Row className="g-0">
          <Col className="m-1">
            <ListGroup>
              {commentary.map((commentary) => (
                <CommentaryItem
                  key={commentary.commentaryID}
                  commentary={commentary}
                />
              ))}
            </ListGroup>
          </Col>
        </Row>
      )}
    </>
  );
};

export default CommentaryView;