import { useState } from "react";
import { runInAction } from "mobx";
import { observer } from "mobx-react-lite";
import { Collapse, Spinner, Row, Col, ListGroupItem } from "reactstrap";
import { sprintf } from "sprintf-js";
import { useTranslation } from "react-i18next";
import { getLanguage } from "taehui-ts/language";

import CommentItems from "src/note/CommentItems";
import { GetCommentAPI, CommentAPIComment, NoteAPINote } from "src/wwwAPI";
import { wwwAXIOS } from "src/Www";
import { formatText, getGenreText } from "src/Utility";
import { useSiteStore } from "src/Stores";

export default observer(
  ({
    noteID,
    artist,
    title,
    genre,
    levelText,
    level,
    highestCount,
    totalCount,
    fittedText,
    wantAvatarID,
    wantAvatarName,
  }: NoteAPINote) => {
    const { siteAvatarID } = useSiteStore();
    const [isCommentOpened, setCommentOpened] = useState(false);
    const [isLoading, setLoading] = useState(false);
    const [comments, setComments] = useState<CommentAPIComment[]>([]);
    const { t } = useTranslation();

    return (
      <ListGroupItem>
        <Row
          className="g-0 route"
          onClick={async () => {
            if (isCommentOpened) {
              setCommentOpened(false);
            } else {
              setLoading(true);
              (async () => {
                const { status, data } = await wwwAXIOS.get<GetCommentAPI>(
                  "/comment",
                  {
                    params: {
                      noteID,
                      avatarID: siteAvatarID,
                      language: getLanguage(),
                    },
                  },
                );
                if (status === 200) {
                  runInAction(() => {
                    setComments(data.comments);
                    setCommentOpened(true);
                    setLoading(false);
                  });
                }
              })();
            }
          }}
        >
          <Col className="m-1" xs="auto">
            <span className={`level${level}`}>{levelText}</span>{" "}
            <span className="title">{title}</span>{" "}
            {isLoading && <Spinner size="sm" />}
            <br />
            {fittedText && (
              <span className="fittedText">{fittedText}</span>
            )}{" "}
            <span className="artist">{artist}</span>{" "}
            <span className="genre">{getGenreText(genre)}</span>
            <br />
            {typeof highestCount === "number" &&
              typeof totalCount === "number" && (
                <>
                  <span className="fittedText">
                    {sprintf(t("highestCountText"), formatText(highestCount))}
                  </span>
                  <br />
                  <span className="fittedText">
                    {sprintf(t("totalCountText"), formatText(totalCount))}
                  </span>
                </>
              )}
          </Col>
        </Row>
        <Collapse isOpen={isCommentOpened}>
          <CommentItems
            comments={comments}
            wantAvatarID={wantAvatarID}
            wantAvatarName={wantAvatarName}
          />
        </Collapse>
      </ListGroupItem>
    );
  },
);