import { Component, signal, ChangeDetectionStrategy, inject, WritableSignal } from '@angular/core';
import { UserService } from './user.service';
import { NgFor, NgIf } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgFor, NgIf],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  title = 'angular-workshop';
  
  private userService = inject(UserService);
  
  selectedUserId = signal<number | null>(null);

  users: WritableSignal<any[]> = signal([]);
  
  todos: WritableSignal<any[]> = signal([]);

  isLoadingUsers = signal(true);
  isLoadingTodos = signal(false);
  
  ngOnInit() {
    this.userService.getUsers().subscribe(users => {
      this.users.set(users);
    });
  }
  
  onUserSelect(event: Event) {
    this.isLoadingTodos.set(true)
    const userId = Number((event.target as HTMLSelectElement).value);
    this.selectedUserId.set(userId);
    this.userService.getTodos(userId).subscribe(todos => {
      this.todos.set(todos)
      this.isLoadingTodos.set(false)
    });
  }
}