<script lang="ts" setup>

const { fetchTodos, toggleTodo, createTodo, deleteTodo } = useTodoActions();
const { data: todos, refresh, status, pending } = await useAsyncData('todos', () => fetchTodos());

async function handleSubmit(event: Event) {
  event.preventDefault();
  const form = event.currentTarget as HTMLFormElement;
  if (!form) return;

  const formData = new FormData(form);
  const title = formData.get("title");
  await createTodo(title as string);

  refresh();
};

</script>

<template>
  <!-- <div v-if="pending">Loading...</div> -->

  <div v-if="todos !== undefined"
    class="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
    <main class="flex flex-col gap-8 row-start-2 items-center sm:items-start">
      <div class="flex flex-row items-center ">
        <img class="dark:invert size-24" src="/nuxt.svg" alt="Nuxt logo" />
        <div class="ml-3.5 mr-2 font-mono opacity-70">&amp;</div>
        <img class="dark:invert" src="/bknd.svg" alt="bknd logo" width="183" height="59" />
      </div>

      <List :items="['Get started with a full backend.', 'Focus on what matters instead of repetition.']" />

      <div class="flex flex-col border border-foreground/15 w-full py-4 px-5 gap-2">
        <h2 class="font-mono mb-1 opacity-70"><code>What's next?</code></h2>
        <div class="flex flex-col w-full gap-2">
          <div v-if="todos.total > todos.limit"
            class="bg-foreground/10 flex justify-center p-1 text-xs rounded text-foreground/40">
            {{ todos.total - todos.limit }} more todo(s) hidden
          </div>

          <div class="flex flex-col gap-3">
            <div v-for="todo in todos.todos" :key="String(todo.id)" class="flex flex-row">
              <div class="flex flex-row flex-grow items-center gap-3 ml-1">
                <input type="checkbox" class="flex-shrink-0 cursor-pointer" :checked="!!todo.done"
                  @change="() => { toggleTodo(todo); refresh() }" />
                <div class="text-foreground/90 leading-none">{{ todo.title }}</div>
              </div>
              <button type="button" class="cursor-pointer grayscale transition-all hover:grayscale-0 text-xs"
                @click="() => { deleteTodo(todo.id); refresh() }">
                ❌
              </button>
            </div>
          </div>

          <form class="flex flex-row w-full gap-3 mt-2" :key="todos.todos.map(t => t.id).join()" @submit="handleSubmit">
            <input type="text" name="title" placeholder="New todo"
              class="py-2 px-4 flex flex-grow rounded-sm bg-foreground/10 focus:bg-foreground/20 transition-colors outline-none" />
            <button type="submit" class="cursor-pointer">Add</button>
          </form>
        </div>
      </div>
    </main>
    <Footer />
  </div>
</template>
