import {
  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  OnDestroy,
  OnInit,
  ViewEncapsulation,
} from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { Subject, takeUntil } from 'rxjs';
import { fuseAnimations } from '@fuse/animations';
import { FuseConfirmationService } from '@fuse/services/confirmation';

import { Popup } from '../models/popup';
import { PopupService } from '../services/popup.service';
import { Router } from '@angular/router';

@Component({
  selector: 'popup-view',
  templateUrl: './view.component.html',
  styles: [
    /* language=SCSS */
    `
      .popup-view-grid {
        grid-template-columns: 60px auto 40px;

        @screen sm {
          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
        }

        @screen md {
          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
        }

        @screen lg {
          grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
        }
      }
    `,
  ],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: fuseAnimations,
})
export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
  isLoading = false;

  private _unsubscribeAll: Subject<any> = new Subject<any>();

  popup: Popup | undefined;

  /**
   * Constructor
   */
  constructor(
    private _changeDetectorRef: ChangeDetectorRef,
    private _fuseConfirmationService: FuseConfirmationService,
    private _formBuilder: FormBuilder,
    private _popupService: PopupService,
    private router: Router
  ) {}

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

  /**
   * On init
   */
  ngOnInit(): void {
    this._popupService.popup$
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe((popup: Popup | undefined) => {
        if (!popup) {
          return;
        }

        this.popup = popup;
        // Mark for check
        this._changeDetectorRef.markForCheck();
      });
  }

  /**
   * After view init
   */
  ngAfterViewInit(): void {}

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

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

  // -----------------------------------------------------------------------------------------------------
  // @ Private methods
  // -----------------------------------------------------------------------------------------------------

  /**
   * Toggle edit mode
   *
   * @param editMode
   */
  __modifyPopup(): void {
    let url: string = 'board/popup/redit/' + this.popup?.id;
    this.router.navigateByUrl(url);
  }
}
