import { observer } from "mobx-react-lite";
import { useTranslation } from "react-i18next";
import { Col, ListGroupItem, Row } from "reactstrap";
import Swal from "sweetalert2";
import { getDatetime } from "taehui-ts/date";

import { useForumStore } from "src/Stores";
import { GetAutoEssayAPI } from "src/wwwAPI";
import useWipeAutoEssay from "src/forum/useWipeAutoEssay";

const AutoEssayTitleView = observer<{ autoEssay: GetAutoEssayAPI[0] }>(
  ({ autoEssay: { autoEssayID, title, text, date } }) => {
    const { mutateAsync: wipeAutoEssay } = useWipeAutoEssay();

    const { setTitle, setText, setAutoEssayID } = useForumStore();
    const { t } = useTranslation();

    return (
      <ListGroupItem
        className="route"
        onClick={async () => {
          const { isConfirmed, isDenied } = await Swal.fire({
            title: t("autoEssay"),
            text: t("setAutoEssayQuestion"),
            icon: "question",
            showDenyButton: true,
            denyButtonText: t("wipeEssay"),
          });

          if (isConfirmed) {
            setTitle(title);
            setText(text);
            setAutoEssayID(autoEssayID);
          }

          if (isDenied) {
            await wipeAutoEssay();
            setAutoEssayID(undefined);
          }
        }}
      >
        <Row className="g-0">
          <Col className="m-1">
            <span>{title}</span>
          </Col>
          <Col className="m-1" xs="auto">
            <span>{getDatetime(date)}</span>
          </Col>
        </Row>
      </ListGroupItem>
    );
  },
);

export default AutoEssayTitleView;