import { useNavigate } from "@solidjs/router";
import { JSXElement, Show, createSignal, onMount, useContext } from "solid-js";

import { LoginContext } from "../Context/GlobalState";
import { NewComment, createComment } from "../Util/api";

/** NewCommentInputArea is a component that allows users to submit a comment on a **post or comment**.
 * @param {Object} props The properties for the NewCommentInputArea component.
 * @param {number} props.parentPostId The id of the post that the comment is a reply to.
 * @returns {JSXElement} A JSXElement that contains a textarea and a submit button.
 */
export function NewCommentInputArea({
  parentPostId,
}: {
  parentPostId: number;
}): JSXElement {
  const [content, setContent] = createSignal("");
  const [waiting, setWaiting] = createSignal(false);

  // We assumte this context is always available
  const login_ctx = useContext(LoginContext)!;

  const nav = useNavigate();

  const sendComment = (): void => {
    setWaiting(true);

    const response = createComment({
      content: content(),
      user_token: login_ctx.token(),
      parent_post_id: parentPostId,
    } as NewComment);

    if (response) {
      response.then(() => {
        setWaiting(false);
        setContent("");
        nav("/");
      });
    }
  };

  // Bail out if not logged in
  onMount(() => {
    if (!login_ctx.loggedIn()) nav("/");
  });

  return (
    <Show
      when={!waiting()}
      fallback={<span class="loading loading-spinner loading-lg self-center" />}
    >
      <div class="flex w-full flex-col space-y-2">
        <textarea
          class="textarea textarea-bordered h-32"
          placeholder="Reply to post..."
          maxLength={500}
          onInput={(input): void => {
            setContent(input.target.value);
          }}
        />
        <button
          class={
            "btn btn-primary btn-sm self-end" +
            (content() == "" ? " btn-disabled" : "")
          }
          onClick={sendComment}
        >
          Submit
        </button>
      </div>
    </Show>
  );
}