<script lang="ts">
  import { createRouter, type Todo } from "@glstack-test/rpc"
    import type { ChangeEventHandler } from "svelte/elements";
  const router = createRouter("http://127.0.0.1:8080");
  let todos = $state<Todo[]>([])
  let todoToCreateTask = $state<string>("")
  const fetchTodos = () => {
    router.todos.listTodos({}).then((r) => {
      todos = r.todos;
    })
  }
  $effect(() => {
    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)
    })
  }
</script>

<div>
  <h1>Create Todo</h1>
  <input bind:value={todoToCreateTask} type="text"/>
  <button onclick={createTodo}> create </button>
  {#each todos as todo (todo.id)}
  <div>
    {todo.task}
    <input type='checkbox' onchange={setTodoDone(todo.id || "",todo.task)}/>
    <button onclick={deleteTodo(todo.id || "")}>delete</button>
  </div>
  {/each}
</div>
