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 { GetCommentaryAPI } from "src/wwwAPI";
import useWipeCommentary from "src/commentary/useWipeCommentary";
import usePutCommentary from "src/commentary/usePutCommentary";

const CommentaryItem = ({
  commentary: { commentaryID, avatarName, text, date },
}: {
  commentary: GetCommentaryAPI[number];
}) => {
  const { t } = useTranslation();

  const [isModifyOpened, setModifyOpened] = useState(false);
  const [avatarCipher, setAvatarCipher] = useState("");
  const [textInput, setTextInput] = useState("");

  const { mutateAsync: wipeCommentary } = useWipeCommentary();
  const { mutateAsync: putCommentary } = usePutCommentary();

  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 } }) => {
                setTextInput(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 && textInput) {
                  await putCommentary({
                    commentaryID,
                    avatarCipher,
                    text: textInput,
                  });
                } else {
                  toast.error(t("failedValidation"));
                }
              }}
            >
              {t("doModifyCommentary")}
            </Button>
          </Col>
          <Col className="m-1" xs="auto">
            <Button
              color="danger"
              onClick={async () => {
                if (avatarCipher) {
                  await wipeCommentary({ commentaryID, avatarCipher });
                } else {
                  toast.error(t("failedValidation"));
                }
              }}
            >
              {t("wipeCommentary")}
            </Button>
          </Col>
        </Row>
      </Collapse>
    </ListGroupItem>
  );
};

export default CommentaryItem;