// app.js

import { TodoAPI } from './api.js';

const todoList = document.getElementById('todo-list');
const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');

async function renderTodos() {
    todoList.innerHTML = '';
    const todos = await TodoAPI.getTodos();
    todos.forEach(todo => {
        const li = document.createElement('li');
        li.classList.add('todo-item');
        li.dataset.id = todo.id;
        li.innerHTML = `
            <input type="checkbox" ${todo.done ? 'checked' : ''}>
            <span>${todo.title}</span>
            <button class="delete-btn">X</button>
        `;
        todoList.appendChild(li);
    });
}

todoForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const title = todoInput.value.trim();
    if (title) {
        await TodoAPI.addTodo(title);
        todoInput.value = '';
        renderTodos();
    }
});

todoList.addEventListener('click', async (e) => {
    const li = e.target.closest('.todo-item');
    if (!li) return;

    const id = li.dataset.id;

    if (e.target.type === 'checkbox') {
        const isDone = e.target.checked;
        await TodoAPI.toggleTodo(id, isDone);
    }

    if (e.target.classList.contains('delete-btn')) {
        await TodoAPI.deleteTodo(id);
    }
    
    renderTodos();
});

// Initial rendering
document.addEventListener('DOMContentLoaded', renderTodos);