import { useMemo } from "react";
import { Col, Row } from "reactstrap";
import { sprintf } from "sprintf-js";
import { useTranslation } from "react-i18next";
import { useTo } from "taehui-ts/fe-utility";

import { CommentAPIComment } from "src/wwwAPI";
import {
  formatText,
  getHitPointsClass,
  getQuitStatusValue,
  toDate,
} from "src/Utility";
import AvatarDrawing from "src/AvatarDrawing";
import AvatarTitle from "src/AvatarTitle";

export default function CommentItem({
  date,
  avatarID,
  avatarName,
  stand,
  band,
  point,
  isP,
  commentary,
  isTargetAvatar,
  judgmentMode,
  hitPointsMode,
  isPaused,
}: CommentAPIComment) {
  const { quit, quitCss } = useMemo(
    () => getQuitStatusValue(point, stand),
    [point, stand],
  );
  const { t } = useTranslation();
  const to = useTo();

  return (
    <Row
      onClick={() => {
        to(`/qwilight/avatar/${encodeURIComponent("#")}${avatarID}`);
      }}
      className={`g-0 route ${isTargetAvatar ? "target" : ""}`}
    >
      <Col className="m-1" xs="auto">
        <AvatarDrawing avatarID={avatarID} />
      </Col>
      <Col className="m-1" xs="auto">
        <span className={quitCss}>{quit}</span>
        {isP && (
          <>
            <br />
            <span>FULL</span>
          </>
        )}
      </Col>
      <Col className="m-1" xs="auto">
        <AvatarTitle avatarID={avatarID} />
        <span className="avatar">{avatarName}</span>{" "}
        <span className="date">{toDate(date)}</span>
        <br />
        <span className={getHitPointsClass(hitPointsMode)}>
          {sprintf(t("textStand"), formatText(stand))}
        </span>{" "}
        <span
          className={(() => {
            switch (judgmentMode) {
              case 0:
                return "level2";
              case 2:
                return "level4";
              case 3:
                return "level1";
              case 5:
                return "level5";
              default:
                return "point";
            }
          })()}
        >
          {(100 * point).toFixed(2)}％
        </span>{" "}
        <span className="band">{sprintf(t("textBand"), band.toString())}</span>
        {isPaused && " ⏸️"}
        <br />
        {commentary && <span>💬 {commentary}</span>}
      </Col>
    </Row>
  );
}