/**
 * @file Achievement toast notification component.
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
/* eslint-disable react/no-multi-comp -- Sub-component is tightly coupled to the toast container */
import { type JSX, useEffect } from "react";
import { useGame } from "../../context/gameContext.js";
import type { Achievement } from "@elysium/types";

interface ToastItemProperties {
  readonly achievement: Achievement;
  readonly onDismiss:   (id: string)=> void;
}

/**
 * Renders a single achievement toast item.
 * @param props - The toast item properties.
 * @param props.achievement - The achievement to display.
 * @param props.onDismiss - Callback to dismiss the toast.
 * @returns The JSX element.
 */
const ToastItem = ({
  achievement,
  onDismiss,
}: ToastItemProperties): JSX.Element => {
  useEffect(() => {
    const timer = setTimeout(() => {
      onDismiss(achievement.id);
    }, 4000);
    return (): void => {
      clearTimeout(timer);
    };
  }, [ achievement.id, onDismiss ]);

  function handleClick(): void {
    onDismiss(achievement.id);
  }

  const crystals = achievement.reward?.crystals;

  return (
    <div className="game-toast" onClick={handleClick}>
      <span className="toast-icon">{achievement.icon}</span>
      <div className="toast-content">
        <span className="toast-label">{"Achievement Unlocked!"}</span>
        <span className="toast-name">{achievement.name}</span>
        {crystals !== undefined
          && <span className="toast-reward">
            {"💎 +"}
            {crystals}
          </span>
        }
      </div>
    </div>
  );
};

/**
 * Renders the achievement toast container with pending achievement notifications.
 * @returns The JSX element or null if there are no pending achievements.
 */
const AchievementToast = (): JSX.Element | null => {
  const { unlockedAchievements: pendingAchievements, dismissAchievement }
    = useGame();

  if (pendingAchievements.length === 0) {
    return null;
  }

  return (
    <>
      {pendingAchievements.map((achievement) => {
        return (
          <ToastItem
            achievement={achievement}
            key={achievement.id}
            onDismiss={dismissAchievement}
          />
        );
      })}
    </>
  );
};

export { AchievementToast };