import {
  Component,
  OnDestroy,
  OnInit,
  ViewChild,
  ViewEncapsulation,
  Input
} from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';

import { FuseUtils } from 'src/@fuse/utils';
import { fuseAnimations } from 'src/@fuse/animations';
import { Dashboard } from 'src/modules/dashboard/model/Dashboard';

@Component({
  selector: 'app-pages-settings-dashboard-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.scss'],
  encapsulation: ViewEncapsulation.None,
  animations: fuseAnimations
})
export class DetailsComponent implements OnInit, OnDestroy {
  @Input()
  dashboard: Dashboard;
  tags: any[];
  formType: string;
  dashboardForm: FormGroup;

  @ViewChild('titleInput', { static: false })
  titleInputField;

  // Private
  private _unsubscribeAll: Subject<any>;

  /**
   * Constructor
   *
   * @param {TodoService} _dashboardService
   * @param {FormBuilder} _formBuilder
   */
  constructor(private _formBuilder: FormBuilder) {
    // Set the private defaults
    this._unsubscribeAll = new Subject();
  }

  // -----------------------------------------------------------------------------------------------------
  // @ Lifecycle hooks
  // -----------------------------------------------------------------------------------------------------

  /**
   * On init
   */
  ngOnInit(): void {
    if (undefined !== this.dashboard) {
      this.dashboardForm = this.createDashboardForm();
    }
  }

  /**
   * On destroy
   */
  ngOnDestroy(): void {
    // Unsubscribe from all subscriptions
    this._unsubscribeAll.next();
    this._unsubscribeAll.complete();
  }

  // -----------------------------------------------------------------------------------------------------
  // @ Public methods
  // -----------------------------------------------------------------------------------------------------

  /**
   * Focus title field
   */
  focusTitleField(): void {
    setTimeout(() => {
      this.titleInputField.nativeElement.focus();
    });
  }

  /**
   * Create dashboard form
   *
   * @returns {FormGroup}
   */
  createDashboardForm(): FormGroup {
    return this._formBuilder.group({
      id: [this.dashboard.id],
      title: [this.dashboard.title],
      description: [this.dashboard.description]
    });
  }

  /**
   * Toggle star
   *
   * @param event
   */
  toggleStar(event): void {
    event.stopPropagation();
  }

  /**
   * Toggle important
   *
   * @param event
   */
  toggleImportant(event): void {
    event.stopPropagation();
  }

  /**
   * Toggle Completed
   *
   * @param event
   */
  toggleCompleted(event): void {
    event.stopPropagation();
  }

  /**
   * Toggle Deleted
   *
   * @param event
   */
  toggleDeleted(event): void {
    event.stopPropagation();
  }

  /**
   * Toggle tag on dashboard
   *
   * @param tagId
   */
  toggleTagOnTodo(tagId): void {}

  /**
   * Has tag?
   *
   * @param tagId
   * @returns {any}
   */
  hasTag(tagId): any {}

  /**
   * Add dashboard
   */
  addTodo(): void {}
}
