import { createSignal } from "solid-js";
import { createContext } from "solid-js";

import { Route, Routes, A } from "@solidjs/router";

import { createPost, getPosts } from "./api";
import { Post, NewPost } from "./api";

export const TestContext = createContext("Test123");

function Root() {
  return (
    <>
      <TestContext.Provider value="Test123">
        <div class="flex flex-col items-center my-2">
          <Navbar />
          <div class="flex flex-col items-center md:w-96 space-y-2">
            <Primary />
          </div>
        </div>
      </TestContext.Provider>
    </>
  );
}

function Navbar() {
  return (
    <div class="navbar bg-base-100 max-w-3xl max-w flex justify-evenly">
      <a class="btn btn-ghost normal-case text-xl">hello</a>
      <Menu />
      <A href="/login" class="btn btn-ghost normal-case text-sm">
        Login
      </A>
    </div>
  );
}

function Menu() {
  return (
    <ul class="menu menu-horizontal bg-base-200 rounded-box space-x-2 justify-end">
      <li>
        <A href="/" end>
          Home
        </A>
      </li>
      <li>
        <A href="/new" end>
          New
        </A>
      </li>
      <li>
        <A href="/boards" end>
          Boards
        </A>
      </li>
      <li>
        <A href="/login" end>
          Login
        </A>
      </li>
    </ul>
  );
}

function NewPostInputArea() {
  const [content, setContent] = createSignal("");
  return (
    <div class="flex flex-col space-y-2">
      <textarea
        class="textarea textarea-bordered"
        placeholder="Speak your mind..."
        oninput={(input) => {
          setContent(input.target.value);
        }}
      ></textarea>
      <button
        class={
          "btn btn-primary self-end btn-sm" +
          (content() == "" ? " btn-disabled" : "")
        }
        onclick={() => {
          if (content() == "") return;
          createPost({ content: content(), token: "" } as NewPost);
        }}
      >
        Submit
      </button>
    </div>
  );
}

function Posts() {
  const [posts, setPosts] = createSignal([] as Post[]);
  const [loading, setLoading] = createSignal(true);

  getPosts().then((posts) => {
    setPosts(posts as any);
    setLoading(false)
  });

  return (
    <div class="flex flex-col space-y-2 w-full md:w-96">
      { loading() ? <span class="loading loading-spinner loading-lg self-center"></span> : <></> }
      {posts().map((post) => {
        if (post.content == "") return; // Filtering out empty posts, remove this later
        return <PostSegment post={post}></PostSegment>;
      })}
    </div>
  );
}

function PostSegment({ post }: { post: Post }) {
  return (
    <div class="card bg-base-200 shadow-lg compact text-base-content w-full">
      <div class="card-body">
        <p class="text-base-content">{post.content}</p>
        {/* <p>{post.votes.up}</p>
        <p>{post.votes.down}</p> */}
      </div>
    </div>
  );
}

function Primary() {
  return (
    <Routes>
      <Route path="/" element={<Posts />} />
      <Route path="/new" element={<NewPostInputArea />} />
      <Route path="/boards" element={<div>Boards</div>} />
      <Route path="/login" element={<Login />} />
    </Routes>
  );
}

function Login() {
  return (
    <div>
      Login
      <input class="input input-bordered" type="text" />
    </div>
  );
}

export default Root;