@Component({
  selector: 'app-toolbar',
  template: `
    <div class="toolbar">
      <i class="check-square" (click)="checkAll()"></i>
      <i class="trash" (click)="deleteChecked()"></i>
      <input type="text" #input (input)="filterTodos(input.value)">
    </div>`,
  styleUrls: ['./toolbar.component.scss']
})
export class ToolbarComponent {
  /* only Facades and NO States, NO other services */
  constructor(private todoFacade: TodoFacade) { }

  checkAll() {
    this.todoFacade.toggleAllTodos();
  }

  deleteChecked() {
    this.todoFacade.deleteAllTodos();
  }
}

@Injectable({ "providedIn": "root" })
export class TodoFacade {
  /* only States, services and other Facades (!) */
  constructor(private todoState: TodoState) { }
  
  todos$ = this.todoState.todos$;

  deleteTodo(todo: Todo): void {
    const todos = this.todoState.getTodos$();
    this.todoState.setTodos(
      [...todos.filter(x => x !== todo)]
    );
  }
}

@Injectable({ "providedIn": "root" })
export class TodoState {

  private todos$ = new BehaviorSubject<Todo[]>(sampleTodos);
  private filter$ = new BehaviorSubject<string>('');
  private updating$ = new BehaviorSubject<boolean>(false);

  getTodos$(): Observable<Todo[]> {
    return this.todos$.asObservable();
  }

  setTodos(todos: Todo[]): void {
    this.todos$.next(todos);
  }

  isUpdating$(): Observable<boolean> {
    return this.updating$.asObservable();
  }
}

@Injectable({ "providedIn": "root" })
export class TodoApiService {
    
    constructor( private httpClient: HttpClient ) { }

    getTodos(): Observable<Todo[]> {
        const url = `${environment.apiServer}/todos`;
        return this.httpClient.get<Todo[]>(url);
    }
}