import {
  FormEvent,
  MutableRefObject,
  useEffect,
  useRef,
  useState,
} from "react";
import { NightRunner } from "@nightrunner/nightrunner_lib";
import "./App.css";

// *** Types ***
//
// Types to make the code more readable. This is not necessary, but it helps
// to understand the code, and since this is typescript, it's a good habit.

/**
 * Props for the App component.
 * @param {NightRunner} engine - The NightRunner instance.
 */
type AppProps = {
  engine: NightRunner;
};

/**
 * ActionResult is a union type of the possible results of an action.
 * An action is a command the player types and is parsed by NightRunner.
 *
 * The messageType is a string that describes the type of the result in
 * the context of an action.
 *
 * @param {string} messageType - The type of the result from the action as interpreted by NightRunner.
 * @param {string} data - When the return messageType from the parser is anything other than an `EventSuccess`, the value will be a string.
 */
type ActionResult = {
  messageType:
    | "look"
    | "inventory"
    | "drop_item"
    | "new_item"
    | "quit"
    | "help"
    | "subject_no_event";
  data: string;
};

/**
 * When the action executed by the player triggers an event, the event result is returned.
 * @param {string} messageType - The type of the result from the action as interpreted by NightRunner.
 * @param {EventSuccess} data -  When the return messageType from the parser is an `EventSuccess`, the value will be an object.
 */
type EventResult = {
  messageType: "event_success";
  data: EventSuccess;
};

/**
 * An EventSuccess type is an object that contains the result of an event.
 * It contains a message field that is a string, with all message_parts concatenated
 * together and can be used for simple layouts that don't require any special
 * formatting.
 * It also contains a message_parts field that is an object with the three main parts
 * of the message returned by NightRunner.
 * templated_words is an array of strings that are marked as template words using the
 * `{}` syntax in the data provided for NightRunner during initialization. The
 * templated words are replaced with the values contained in the `{}` syntax and also
 * added to this array. These words can be used to identify the words that were replaced
 * and can be used for highlighting the words in the display text. The only words that
 * are replaced are items and subjects currently in the player's current location.
 *
 * @param {string} message - The message returned by NightRunner corresponding to the event
 * result.
 * @param {string[]} templated_words - An array of strings that are marked as template words
 * using the `{}` syntax in the data provided for NightRunner during initialization.
 * @param {MessageParts} message_parts - An object with the three main parts of an event message
 * returned by NightRunner.
 */
type EventSuccess = {
  message: string;
  message_parts: MessageParts;
  templated_words: string[];
};

/**
 * A successful event message will contain the three main parts of the message.
 *
 * @param {string} room_text - This will be the text of the corresponding narrative active.
 * @param {string} event_text - Extra messages that might be returned from the event in adition to the narrative.
 * @param {string} exits - The exits of the current room, their directions, and a description of the room they lead to.
 *
 */
type MessagePartKeys = "room_text" | "event_text" | "exits";
type MessageParts = Map<MessagePartKeys, string>;

/**
 * A successful result will be either a string corresponding to the action result
 * or an EventSuccess object corresponding to the event result.
 */
type ResultOk = ActionResult | EventResult;

type ResultError = {
  message: string;
};

/**
 * An error returned by NightRunner will have a string message that can be displayed
 * to the player. We can't anotate an error type in a catch block, so we have to
 * help typescript know that the error contains a message field.
 * We can do this with a type guard function.
 * For more information check the documentation for [Type Guards]{@link (https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and-type-assertions)}
 * @param x - The error object returned by NightRunner.
 * @returns boolean - True if the error object has a message field of type string.
 */
const isError = (x: any): x is ResultError => {
  return typeof x.message === "string";
};

/**
 * @returns JSX.Element - An empty div always at the bottom of the event message container.
 * This is used to make the event message container scroll to the bottom when more text is added.
 */
const AlwaysScrollToBottom = () => {
  const elementRef = useRef() as MutableRefObject<HTMLDivElement>;
  useEffect(() => elementRef.current.scrollIntoView());
  return <div ref={elementRef} />;
};

function App({ engine }: AppProps) {
  const firstRoomData: EventSuccess = engine.first_room_text();
  const [input, setInput] = useState("");
  const [roomText, setRoomText] = useState(
    firstRoomData.message_parts.get("room_text") || ""
  );
  const [eventText, setEventText] = useState<string[]>([]);
  const [exits, setExits] = useState(firstRoomData.message_parts.get("exits") || "");
  const [message, setMessage] = useState(firstRoomData.message);
  const [currentIndex, setCurrentIndex] = useState(0);

  const submitAction = (e: FormEvent) => {
    e.preventDefault();
    try {
      let result: ResultOk = engine.parse(input);
      parseResult(result);
    } catch (e) {
      if (isError(e)) {
        eventText.push(e.message);
      }
    }
    setInput("");
  };
  const parseResult = (result: ResultOk) => {
    switch (result.messageType) {
      case "look":
      case "inventory":
      case "drop_item":
      case "new_item":
      case "subject_no_event":
        if (eventText?.length > 0 && result?.data?.length > 0) {
          eventText.push("\n");
        }
        if (result?.data?.length > 0) {
          eventText.push(result.data);
        }
        break;
      case "help":
        alert(result.data);
        break;
      case "event_success":
        const new_room_text = result.data.message_parts.get("room_text") || roomText;
        const new_event_text = result.data.message_parts.get("event_text") || "";
        const new_exits = result.data.message_parts.get("exits") || exits;
        setRoomText(new_room_text);
        setExits(new_exits);
        setMessage(message + "\n\n" + result.data.message);
        if (new_event_text?.length > 0) {
          setEventText([...eventText, new_event_text]);
        } else {
          setEventText([]);
        }
        break;
    }
    // This is here so you can see the result of the action in the console for
    // learning purposes.
    console.log(result);
  };

  const renderEventText = () => {
    return eventText.map((text, i) => {
      return <div key={i}>{text}</div>;
    });
  };

  const renderSeparateAreas = () => {
    return (
      <div>
        <h1>Using each message part in their own area</h1>
        <div className="centered">
          <div>Room message</div>
          <pre className="room-message display-area">{roomText}</pre>
          <div>Event Message</div>
          <pre className="event-message display-area">
            <div>
              {renderEventText()}
              <AlwaysScrollToBottom />
            </div>
          </pre>
          <div>Exits</div>
          <pre className="exits display-area">{exits}</pre>
        </div>
      </div>
    );
  };

  const renderSingleArea = () => {
    return (
      <div>
        <h1>Using separate message parts in one single area</h1>
        <div className="centered">
          <pre className="display-area single-area">
            <div>{roomText}</div>
            <br />
            <div>{renderEventText()}</div>
            <br />
            <div>{exits}</div>
            <AlwaysScrollToBottom />
          </pre>
        </div>
      </div>
    );
  };

  const renderMessageNoParts = () => {
    return (
      <div>
        <h1>Using the full message without extra parts</h1>
        <div className="centered">
          <pre className="display-area single-area">
            <div>{message + "\n\n" + eventText.join("\n")}</div>
            <AlwaysScrollToBottom />
          </pre>
        </div>
      </div>
    );
  };

  let displays = [
    renderSingleArea(),
    renderSeparateAreas(),
    renderMessageNoParts(),
  ];

  return (
    <div className="App">
      <header className="App-header">
        {displays[currentIndex]}
        <form onSubmit={submitAction}>
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            required
          />
          <button type="submit">Send</button>
        </form>
        <button
          style={{ marginTop: "15px" }}
          onClick={() => {
            if (currentIndex < displays.length - 1) {
              setCurrentIndex(currentIndex + 1);
            } else {
              setCurrentIndex(0);
            }
          }}
        >
          Toggle message parts display
        </button>
      </header>
    </div>
  );
}

export default App;
