import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Observable, Subscription } from 'rxjs';
import { TaskList } from '../core/entity/taskList';
import { TaskListService } from '../core/service/task-list.service';
import { AddNewListComponent } from './add-new-list/add-new-list.component';

@Component({
  selector: 'app-task-lists',
  templateUrl: './task-lists.component.html',
  styleUrls: ['./task-lists.component.scss']
})
export class TaskListsComponent implements OnInit {
  taskLists$?: Observable<TaskList[]>;
  private _taskListsSubscription?: Subscription;

  constructor(
    private _dialog: MatDialog,
    private _taskListService: TaskListService
  ) {}

  ngOnInit(): void {
    this.taskLists$ = this._taskListService.taskLists$;
  }

  addNewList(): void {
    const dialogRef = this._dialog.open(AddNewListComponent);
    dialogRef.afterClosed().subscribe(newList => {
      this._taskListService.add(newList);
    });
  }
}