import { Component, EventEmitter, Output, resource } from '@angular/core';

@Component({
  selector: 'app-todo-table',
  templateUrl: './todo-table.html',
  styleUrl: './todo-table.css',
})
export class TodoTable {
  public tasks = resource({
    loader: async (): Promise<Task[]> => {
      const response = await fetch('http://localhost:2000/api/tasks');
      return (await response.json()) as Task[];
    },
  });
  @Output() editTaskEvent = new EventEmitter<Task>();

  editTask(task: Task) {
    this.editTaskEvent.emit(task);
  }

  toggleTaskDoneStatus(task: Task) {
    fetch('http://localhost:2000/api/tasks/' + task.id, {
      method: 'PUT',
      body: JSON.stringify({
        ...task,
        done: !task.done,
      }),
      headers: {
        'content-type': 'application/json',
      },
    });
  }

  deleteTask(task: Task) {
    fetch('http://localhost:2000/api/tasks/' + task.id, {
      method: 'DELETE',
    }).then(() => {
      this.tasks.reload();
    });
  }

  ngOnInit() {
    console.log(this.tasks.value());
  }
}