import { formatUnits } from "viem";
import { usePlayer } from "../providers/PlayerProvider";
import styles from "../styles/Modal.module.css";
import bgStyles from "../styles/Background.module.css";
import { bossToName, bossToReward } from "./BossInfo";
import { bossLevelToClass } from "./Boss";
import { lostSound, wonSound } from "../utils/soundsEffect";

interface BossOutcomeModalProps {
  setIsOpen: (val: boolean) => void;
}

const BossOutcomeModal = ({ setIsOpen }: BossOutcomeModalProps) => {
  const { lastBossResult } = usePlayer();
  if (lastBossResult == null) return null;

  const outcome = lastBossResult.reward != BigInt(0);
  const ascended = lastBossResult.prestigeGained;

  if (outcome) {
    wonSound();
  } else {
    lostSound();
  }

  const text = outcome ? (
    <span>
      and you <strong className={styles.won}>won!</strong> 🤩
    </span>
  ) : (
    <span>
      and you <strong className={styles.lost}>lost</strong> 😔
    </span>
  );
  const rewardAmount = parseFloat(
    parseFloat(
      formatUnits(bossToReward[lastBossResult.level], 18).toString()
    ).toFixed(4)
  );
  const rewardText = ascended ? (
    <p>
      You won <strong>{rewardAmount} RGCVII</strong> and{" "}
      <strong>ASCENDED!!!</strong>. This means you beat the bosses and gained a{" "}
      <strong>Prestige level</strong>. Your GELD is now forfeit, but your legend
      lives on.
    </p>
  ) : outcome ? (
    <p>
      You won <strong>{rewardAmount} RGCVII</strong>
    </p>
  ) : (
    <p>
      Your GELD is now forfeit.
      <br />
      Try again 💪 we know you can do it!
    </p>
  );

  const bossName = bossToName[lastBossResult.variant];
  const bossClass = bossLevelToClass[lastBossResult.variant];

  return (
    <div className={`${styles.modal} ${styles.bossModal}`}>
      <h2>You battled {bossName} Moloch!</h2>
      <div className={`${bgStyles.boss} ${bossClass} ${styles.image}`} />
      <p className={styles.outcome}>{text}</p>
      {rewardText}
      <div>
        <button onClick={() => setIsOpen(false)}>Onward!</button>
      </div>
    </div>
  );
};

export default BossOutcomeModal;