import { Col, Row } from "reactstrap";
import { useTranslation } from "react-i18next";
import { sprintf } from "sprintf-js";

import { LevelAPI } from "src/wwwAPI";
import NoteItems from "src/avatar/NoteItems";
import { _m12, formatText, m0, m1, m2, m3, m4, m5, m6, m7 } from "src/Utility";

const getValueText = (
  data: number[],
  toValue: (value: number) => string,
  lowestUnit: string,
  highestUnit: string,
) => {
  const lowestValue = data[0];
  const highestValue = data[1];
  let text = "";
  if (lowestValue !== -1) {
    text += sprintf(lowestUnit, toValue(lowestValue));
  }
  text += " ";
  if (highestValue !== -1) {
    text += sprintf(highestUnit, toValue(highestValue));
  }
  return text;
};

const getDrawing = (mode: number[], drawing: string[]) => {
  return (
    mode &&
    mode.map((i) => (
      <Col key={i} className="m-1" xs="auto">
        <img src={drawing[i]} className="mode" alt="" />
      </Col>
    ))
  );
};

export default function LevelData({ levelData }: { levelData: LevelAPI }) {
  const {
    levelNote,
    stand,
    point,
    band,
    judgments,
    autoMode,
    noteSaltMode,
    audioMultiplier,
    faintNoteMode,
    judgmentMode,
    hitPointsMode,
    noteMobilityMode,
    longNoteMode,
    inputFavorMode,
    lowestJudgmentConditionMode,
  } = levelData;
  const { t } = useTranslation();

  return (
    <>
      <NoteItems levelNote={levelNote} />
      {stand && (
        <Row className="g-0">
          <Col className="m-1" xs="auto">
            <span className="stand">
              {t("stand")}{" "}
              {getValueText(
                stand,
                formatText,
                t("textStand") + " 🔺",
                t("textStand") + " 🔻",
              )}
            </span>
          </Col>
        </Row>
      )}
      {point && (
        <Row className="g-0">
          <Col className="m-1" xs="auto">
            <span className="point">
              {t("point")}{" "}
              {getValueText(
                point,
                (value) => (100 * value).toString(),
                "%s％🔺",
                "%s％🔻",
              )}
            </span>
          </Col>
        </Row>
      )}
      {band && (
        <Row className="g-0">
          <Col className="m-1" xs="auto">
            <span className="band">
              {getValueText(
                band,
                (value) => value.toString(),
                t("textBand") + " 🔺",
                t("textBand") + " 🔻",
              )}
            </span>
          </Col>
        </Row>
      )}
      {judgments && (
        <>
          {judgments[0] && (
            <Row className="g-0">
              <Col className="m-1" xs="auto">
                <span className="highestJudgment">
                  Yell!{" "}
                  {getValueText(
                    judgments[0],
                    formatText,
                    t("textCount") + " 🔺",
                    t("textCount") + " 🔻",
                  )}
                </span>
              </Col>
            </Row>
          )}
          {judgments[1] && (
            <Row className="g-0">
              <Col className="m-1" xs="auto">
                <span className="higherJudgment">
                  Yell{" "}
                  {getValueText(
                    judgments[1],
                    formatText,
                    t("textCount") + " 🔺",
                    t("textCount") + " 🔻",
                  )}
                </span>
              </Col>
            </Row>
          )}
          {judgments[2] && (
            <Row className="g-0">
              <Col className="m-1" xs="auto">
                <span className="highJudgment">
                  Cool{" "}
                  {getValueText(
                    judgments[2],
                    formatText,
                    t("textCount") + " 🔺",
                    t("textCount") + " 🔻",
                  )}
                </span>
              </Col>
            </Row>
          )}
          {judgments[3] && (
            <Row className="g-0">
              <Col className="m-1" xs="auto">
                <span className="lowJudgment">
                  Good{" "}
                  {getValueText(
                    judgments[3],
                    formatText,
                    t("textCount") + " 🔺",
                    t("textCount") + " 🔻",
                  )}
                </span>
              </Col>
            </Row>
          )}
          {judgments[4] && (
            <Row className="g-0">
              <Col className="m-1" xs="auto">
                <span className="lowerJudgment">
                  Poor{" "}
                  {getValueText(
                    judgments[4],
                    formatText,
                    t("textCount") + " 🔺",
                    t("textCount") + " 🔻",
                  )}
                </span>
              </Col>
            </Row>
          )}
          {judgments[5] && (
            <Row className="g-0">
              <Col className="m-1" xs="auto">
                <span className="lowestJudgment">
                  Failed{" "}
                  {getValueText(
                    judgments[5],
                    formatText,
                    t("textCount") + " 🔺",
                    t("textCount") + " 🔻",
                  )}
                </span>
              </Col>
            </Row>
          )}
        </>
      )}
      {audioMultiplier && (
        <Row className="g-0">
          <Col className="m-1" xs="auto">
            <span className="audioMultiplier">
              {t("audioMultiplier")}{" "}
              {getValueText(
                audioMultiplier,
                (value) => value.toString(),
                "×%.2f 🔺",
                "×%.2f 🔻",
              )}
            </span>
          </Col>
        </Row>
      )}
      <Row className="g-0">{getDrawing(autoMode, m0)}</Row>
      <Row className="g-0">{getDrawing(noteSaltMode, m1)}</Row>
      <Row className="g-0">{getDrawing(faintNoteMode, m2)}</Row>
      <Row className="g-0">{getDrawing(judgmentMode, m3)}</Row>
      <Row className="g-0">{getDrawing(hitPointsMode, m4)}</Row>
      <Row className="g-0">{getDrawing(noteMobilityMode, m5)}</Row>
      <Row className="g-0">{getDrawing(longNoteMode, m6)}</Row>
      <Row className="g-0">{getDrawing(inputFavorMode, m7)}</Row>
      <Row className="g-0">{getDrawing(lowestJudgmentConditionMode, _m12)}</Row>
    </>
  );
}