import { Component, OnDestroy, OnInit } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { TaskList } from '../core/entity/task-list';
import { TaskListService } from '../core/service/task-list.service';

@Component({
  selector: 'app-active-list-tasks',
  templateUrl: './active-list-tasks.component.html',
  styleUrls: ['./active-list-tasks.component.scss']
})
export class ActiveListTasksComponent implements OnInit, OnDestroy {
  private _activeTaskList?: TaskList;
  private _storeSubscription?: Subscription;

  constructor(
    private _router: Router,
    private _taskListService: TaskListService,
    private _snackBar: MatSnackBar
  ) {}

  ngOnInit(): void {
    this._storeSubscription = this._taskListService.store$.subscribe(store => {
      if (store.activeTaskListId) {
        this._activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
        if (!this._activeTaskList) {
          this._backToTaskListPane();
        }
      }
    });
  }

  ngOnDestroy(): void {
    this._storeSubscription?.unsubscribe();
  }

  private _backToTaskListPane(): void {
    this._snackBar.open('La task-list active n\'existe pas dans le store.', 'Fermer', {duration: 5000});
    this._router.navigate(['/']);
  }
}