import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: './component.component.html',
  styleUrls: ['./component.component.css']
})
export class ComponentComponent implements OnInit {
//todoInput in component.html von InputField .
//in addTodo function setzt value auf '' um input zu resetten
//gibt bessere Wege. dont use it. spaghetti code
  @ViewChild('todoInput') todoInput: ElementRef;

  /*
    Variable decleration mit
    let item = '';
    var item = '';
    const item = '';

    var depricated dont use. evil
  */
  items = ['doing groceries', 'wash car'];
  doneItems = [];
  showDoneList = true;

  constructor() {
  }

  ngOnInit() {
  }

  addTodo(newItem: string){
    this.items = [...this.items, newItem];
    this.todoInput.nativeElement.value = '';
  }

  moveToDone(item: string){
    this.items = this.items.filter(x => x != item);
    this.doneItems = [...this.doneItems, item];
  }

  toggleDoneList(){
    this.showDoneList = !this.showDoneList;
  }
}