import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { Task } from 'src/app/core/entity/task';
import { TaskListService } from 'src/app/core/service/task-list.service';


@Component({
  selector: 'app-task-display',
  templateUrl: './task-display.component.html',
  styleUrls: ['./task-display.component.scss']
})
export class TaskDisplayComponent implements AfterViewInit, OnDestroy {
  @Input() task?: Task;
  @ViewChild('titleInput', {static: true}) titleInput?: ElementRef<HTMLInputElement>;
  @ViewChild('descriptionInput', {static: true}) descriptionInput?: ElementRef<HTMLTextAreaElement>;
  titleControl = new FormControl();
  descriptionControl = new FormControl();
  isExpanded = false;
  private _subscriptions: Subscription[] = [];

  constructor(
    private _taskListService: TaskListService
  ) {}

  ngAfterViewInit(): void {
    this.titleControl.setValue(this?.task?.title);
    this.descriptionControl.setValue(this?.task?.description);

    const titleControlSubscription = this.titleControl.valueChanges
        .pipe(
          distinctUntilChanged(),
          debounceTime(500)
        )
        .subscribe(newTitle => {
          if (this.task) {
            this.task.title = newTitle;
            this._taskListService.updateTask(this.task);
          }
        });
    this._subscriptions.push(titleControlSubscription);

    const descriptionControlSubscription = this.descriptionControl.valueChanges
    .pipe(
      distinctUntilChanged(),
      debounceTime(500)
    )
    .subscribe(description => {
      if (this.task) {
        this.task.description = description;
        this._taskListService.updateTask(this.task);
      }
    });
    this._subscriptions.push(descriptionControlSubscription);
  }

  ngOnDestroy(): void {
    this._subscriptions.forEach(subscription => subscription.unsubscribe());
  }

  expand(): void {
    this.isExpanded = !this.isExpanded;
  }

  getExpendedClass(): string {
    let result = 'body';

    if (this.isExpanded) {
      result += ' expanded';
    }
    return result;
  }

  delete(): void {
    if (this.task) {
      this._taskListService.delete(this.task);
    }
  }
}