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

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

export const TestContext = createContext("Test123");

function Root() {
  return (
    <>
      <TestContext.Provider value="Test123">
        <Primary />
      </TestContext.Provider>
    </>
  );
}

function Menu() {
  return (
    <ul class="menu menu-horizontal bg-base-200 rounded-box space-x-1">
      <li>
        <a>Home</a>
      </li>
      <li>
        <a>Boards</a>
      </li>
      <li>
        <a>New</a>
      </li>
    </ul>
  );
}

function NewPostInputArea() {
  const [content, setContent] = createSignal("");
  return (
    <div class="flex flex-col my-4">
      <textarea
        class="textarea textarea-bordered"
        placeholder="Bio"
        oninput={(input) => {
          setContent(input.target.value);
        }}
      ></textarea>
      <button class="btn btn-primary self-end btn-sm mt-4" onclick={() => {
        createPost({ content: content(), token: "" } as NewPost);
      }}>Submit</button>
    </div>
  );
}

function Posts() {
  const [posts, setPosts] = createSignal([]);

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

  return (
    <div class="flex flex-col my-4 space-y-2">
      {posts().map((post) => {
        return (
          <PostSegment post={post}></PostSegment>
        );
      })}
    </div>
  );
}

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


function Primary() {
  return (
    <div class="flex flex-col items-center my-6">
      <Menu></Menu>
      <NewPostInputArea></NewPostInputArea>
      <Posts></Posts>
    </div>
  );
}

export default Root;