/**
 * @file Quest toast notification component for completed and failed quests.
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
/* eslint-disable react/no-multi-comp -- Sub-components are tightly coupled to their containers */
import { type JSX, useEffect } from "react";
import { useGame } from "../../context/gameContext.js";
import type { Quest } from "@elysium/types";

interface QuestToastItemProperties {
  readonly quest:      Quest;
  readonly onDismiss:  (id: string)=> void;
  // eslint-disable-next-line react/require-default-props -- Default value set in destructuring
  readonly isFailure?: boolean;
}

/**
 * Renders a single quest toast notification.
 * @param props - The toast item properties.
 * @param props.quest - The quest to display.
 * @param props.onDismiss - Callback to dismiss the toast.
 * @param props.isFailure - Whether this is a failure toast.
 * @returns The JSX element.
 */
const QuestToastItem = ({
  quest,
  onDismiss,
  isFailure = false,
}: QuestToastItemProperties): JSX.Element => {
  useEffect(() => {
    const timer = setTimeout(() => {
      onDismiss(quest.id);
    }, 4000);
    return (): void => {
      clearTimeout(timer);
    };
  }, [ quest.id, onDismiss ]);

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

  return (
    <div className="game-toast" onClick={handleClick}>
      <span className="toast-icon">{isFailure
        ? "💀"
        : "📜"}</span>
      <div className="toast-content">
        <span className="toast-label">{isFailure
          ? "Quest Failed!"
          : "✨ Quest Complete!"}</span>
        <span className="toast-name">{quest.name}</span>
      </div>
    </div>
  );
};

/**
 * Renders the quest complete toast container.
 * @returns The JSX element or null if there are no pending quest toasts.
 */
const QuestCompleteToast = (): JSX.Element | null => {
  const { completedQuestToasts, dismissCompletedQuest } = useGame();

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

  return (
    <>
      {completedQuestToasts.map((quest) => {
        return (
          <QuestToastItem
            key={quest.id}
            onDismiss={dismissCompletedQuest}
            quest={quest}
          />
        );
      })}
    </>
  );
};

/**
 * Renders the quest failed toast container.
 * @returns The JSX element or null if there are no pending failure toasts.
 */
const QuestFailedToast = (): JSX.Element | null => {
  const { failedQuestToasts, dismissFailedQuest } = useGame();

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

  return (
    <>
      {failedQuestToasts.map((quest) => {
        return (
          <QuestToastItem
            isFailure={true}
            key={quest.id}
            onDismiss={dismissFailedQuest}
            quest={quest}
          />
        );
      })}
    </>
  );
};

export { QuestCompleteToast, QuestFailedToast };