import { createSignal, For } from "solid-js";
import { createRouter, Todo } from "@<@var(context.project.name)>/rpc"
import { createEffect } from 'solid-js'
import "./app.css";

export default function App() {
  const router = createRouter("http://127.0.0.1:8080")
  const [todos, setTodos] = createSignal<Todo[]>([]);
  const [todoToCreateTask, setTodoToCreateTask] = createSignal<string>("");
  const fetchTodos = () => {
    router.todos.listTodos({}).then((r) => {
      setTodos(r.todos)
    })
  }
  createEffect(() => {
    fetchTodos()
  })

  const setTodoDone =  (id: string, task: string) => {
    return async (event : Event & { currentTarget: HTMLInputElement }) => {
      await router.todos.updateTodo({ todo: { id, task, done: event.currentTarget.checked } })
      fetchTodos()
    }
  }

  const deleteTodo = (id: string) => {
    return async () => {
      await router.todos.deleteTodo({ todo: { id } })
      fetchTodos()
    }
  }

  const createTodo = () => {
    router.todos.createTodo({ todo: { id: crypto.randomUUID(), task: todoToCreateTask() } }).then((r) => {
      console.log(r)
      fetchTodos()
    }).catch((e) => {
      console.log(e)
    })
  }

  return (
    <div>
      <p>Create Todo</p>
      <input value={todoToCreateTask()} onInput={(e) => setTodoToCreateTask(e.currentTarget.value)} type="text"/>
      <button onclick={createTodo}> create </button>
      <For each={todos()}>
      {(item:Todo) =>
        <div>
          {item.task}
          <input type='checkbox' checked={item.done} onChange={setTodoDone(item.id || "",item.task)}/>
          <button onclick={deleteTodo(item.id || "")}>delete</button>
        </div>
      }
      </For>
    </div>
  );
}
