import { useState } from "react";
import { useTranslation } from "react-i18next";
import ReactTextareaAutosize from "react-textarea-autosize";
import { toast } from "react-toastify";
import { Button, Col, Collapse, Input, ListGroupItem, Row } from "reactstrap";
import { getDatetime } from "taehui-ts/date";

import { wwwAXIOS } from "src/Www";
import { CommentaryAPICommentary } from "src/wwwAPI";

const CommentaryItem = ({
  commentary: { commentaryID, avatarName, text, date },
}: {
  commentary: CommentaryAPICommentary;
}) => {
  const { t } = useTranslation();

  const [isModifyOpened, setModifyOpened] = useState(false);
  const [avatarCipher, setAvatarCipher] = useState("");
  const [inputText, setInputText] = useState("");

  return (
    <ListGroupItem>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <span>{avatarName}</span>
        </Col>
        <Col
          className="m-1 route"
          onClick={() => {
            setModifyOpened(true);
          }}
        >
          {isModifyOpened ? (
            <ReactTextareaAutosize
              className="form-control"
              defaultValue={text}
              placeholder={t("text")}
              onChange={({ target: { value } }) => {
                setInputText(value);
              }}
            />
          ) : (
            <span className="ln">{text}</span>
          )}
        </Col>
        <Col className="m-1" xs="auto">
          <span>{getDatetime(date)}</span>
        </Col>
      </Row>
      <Collapse isOpen={isModifyOpened}>
        <Row className="g-0">
          <Col className="m-1">
            <Input
              valid={!!avatarCipher}
              invalid={!avatarCipher}
              type="password"
              placeholder={t("avatarCipher")}
              value={avatarCipher}
              onChange={({ target: { value } }) => {
                setAvatarCipher(value);
              }}
            />
          </Col>
          <Col className="m-1" xs="auto">
            <Button
              color="warning"
              onClick={async () => {
                if (avatarCipher && inputText) {
                  const { status } = await wwwAXIOS.put(`/commentary`, {
                    commentaryID,
                    avatarCipher,
                    text: inputText,
                  });
                  switch (status) {
                    case 204:
                      window.location.reload();
                      break;
                    case 403:
                      toast.error(t("failedValidateCipher"));
                      break;
                  }
                } else {
                  toast.error(t("failedValidation"));
                }
              }}
            >
              {t("doModifyCommentary")}
            </Button>
          </Col>
          <Col className="m-1" xs="auto">
            <Button
              color="danger"
              onClick={async () => {
                if (avatarCipher) {
                  const { status } = await wwwAXIOS.delete(`/commentary`, {
                    params: {
                      commentaryID,
                      avatarCipher,
                    },
                  });
                  switch (status) {
                    case 204:
                      window.location.reload();
                      break;
                    case 403:
                      toast.error(t("failedValidateCipher"));
                      break;
                  }
                } else {
                  toast.error(t("failedValidation"));
                }
              }}
            >
              {t("wipeCommentary")}
            </Button>
          </Col>
        </Row>
      </Collapse>
    </ListGroupItem>
  );
};

export default CommentaryItem;