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

import { LoginContext } from "./Root";
import { NewPost, createPost } from "./api";

export function NewPostInputArea(): JSXElement {
  const [content, setContent] = createSignal("");
  const [waiting, setWaiting] = createSignal(false);
  const login_ctx = useContext(LoginContext);

  const nav = useNavigate();

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

    const response = createPost({
      content: content(),
      token: login_ctx?.token(),
    } as NewPost);

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

  onMount(() => {
    if (login_ctx?.token() == "") 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="Speak your mind..."
          maxLength={500}
          onInput={(input): void => {
            setContent(input.target.value);
          }}
        />
        <button
          class={
            "btn btn-primary btn-sm self-end" +
            (content() == "" ? " btn-disabled" : "")
          }
          onClick={sendPost}
        >
          Submit
        </button>
      </div>
    </Show>
  );
}