import { ExtractPayload, type Todo } from '@<@var(context.project.name)>/rpc'
import { createSignal } from 'solid-js';
import { useTodoCollection } from '~/context/todocollection/create';

export const CreateTodo = () => {
  const [todoState, setTodoState] = createSignal<ExtractPayload<Todo>>({
    id: crypto.randomUUID(),
    task: "",
    done: false,
  })

  let inputRef!: HTMLInputElement

  const setTask = () => {
    const todo = {...todoState()}
    todo.task = inputRef.value;
    setTodoState(todo)
  }

  const todoCollection = useTodoCollection()

  const insertTodo = () => {
    todoCollection.insert(todoState())
    setTodoState({
      id: crypto.randomUUID(),
      task: "",
      done: false
    })
    inputRef.value = "";
  }

  return (
    <>
      <input class="border rounded-md px-3 py-1" ref={inputRef} type='text' onInput={setTask} />
      <button class="bg-teal-800 text-teal-100 p-1 rounded-md cursor-pointer" onClick={insertTodo}> create </button>
    </>
  )
}
