<script setup>
import TodoHeader from "./components/TodoHeader.vue";
import TodoList from "./components/TodoList.vue";
import TodoFooter from "./components/TodoFooter.vue";

import { useTodoStore } from "./stores/todo";
import { computed } from "vue";

const todoStore = useTodoStore();

function addTodo(newTodo) {
  console.log("App.vue addTodo:", newTodo);
  todoStore.addTodo(newTodo);
}

function delTodo(item) {
  console.log("App.vue delTodo:", item);
  todoStore.delTodo(item);
}

function moveTodo({ oldIndex, newIndex }) {
  console.log("App.vue moveTodo:", oldIndex, newIndex);
  todoStore.moveTodo(oldIndex, newIndex);
}

function editTodo({ item, text }) {
  console.log("App.vue editTodo:", item, text);
  todoStore.editTodo({ item, text });
}

function toggleTodo(item) {
  todoStore.toggle(item);
}

function changeTabType(type) {
  console.log("App.vue tab change:", type);
  todoStore.setTab(type);
}

const showTodos = computed(() => {
  if (todoStore.tabType === 1)
    return todoStore.todos.filter((t) => !t.completed);
  if (todoStore.tabType === 2)
    return todoStore.todos.filter((t) => t.completed);
  return todoStore.todos;
});
</script>

<template>
  <TodoHeader @addTodo="addTodo" />

  <TodoList
    :todos="showTodos"
    @delTodo="delTodo"
    @move="moveTodo"
    @edit="editTodo"
    :toggleTodo="toggleTodo"
  />

  <TodoFooter
    :count="showTodos.length"
    :tabType="todoStore.tabType"
    @changeTabType="changeTabType"
    @clearCompleted="todoStore.clearCompleted"
  />
</template>
