/**
 * @file Modal prompting players to join the NHCarrigan Discord community.
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
import { useCallback, useState, type JSX } from "react";
import { useGame } from "../../context/gameContext.js";

const sessionKey = "elysium_join_community_dismissed";

/**
 * Renders a modal prompting the player to join the NHCarrigan Discord server.
 * Shown once per session when the player is not already in the guild.
 * @returns The JSX element or null if the player is in the guild or dismissed.
 */
const JoinCommunityModal = (): JSX.Element | null => {
  const { inGuild } = useGame();
  const [ dismissed, setDismissed ] = useState(
    () => {
      return sessionStorage.getItem(sessionKey) === "true";
    },
  );

  const handleDismiss = useCallback((): void => {
    sessionStorage.setItem(sessionKey, "true");
    setDismissed(true);
  }, []);

  if (inGuild || dismissed) {
    return null;
  }

  return (
    <div className="modal-overlay">
      <div className="modal">
        <h2>{"Join Our Community!"}</h2>
        <p>
          {"Did you know Elysium has an active Discord community? "}
          {"Join to chat with other players, get updates, and earn "}
          {"the exclusive Elysian role!"}
        </p>
        <p className="modal-note">
          {"You already earn the Elysian role just by playing — "}
          {"joining lets us show it off in the server!"}
        </p>
        <div className="modal-actions">
          <a
            className="modal-close-button"
            href="https://discord.gg/KKe7BaEnQB"
            onClick={handleDismiss}
            rel="noreferrer"
            target="_blank"
          >
            {"Join Discord"}
          </a>
          <button
            className="modal-close-button"
            onClick={handleDismiss}
            type="button"
          >
            {"Maybe later"}
          </button>
        </div>
      </div>
    </div>
  );
};

export { JoinCommunityModal };