import w0 from "@/assets/w0.png";
import w1 from "@/assets/w1.png";
import w2 from "@/assets/w2.png";
import w4 from "@/assets/w4.png";
import w5 from "@/assets/w5.png";
import w6 from "@/assets/w6.png";
import w7 from "@/assets/w7.png";
import AvatarDrawing from "@/AvatarDrawing";
import AvatarTitle from "@/AvatarTitle";
import {
  formatText,
  getHitPointsClass,
  getQuitStatusValue,
  toDate,
} from "@/Utility";

import { GetCommentAPI } from "@/wwwAPI";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { useMemo } from "react";
import { Col, Row } from "reactstrap";
import { sprintf } from "sprintf-js";
import { useTo } from "taehui-ts/fe-utility";

const ws = [w0, w1, w2, "", w4, w5, w6, w7];

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

  return (
    <Row
      onClick={() => {
        to(`/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">
        <Image src={ws[handled]} width={10} height={60} alt="" />
      </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>
  );
}