import { Component, ViewChild } from '@angular/core';
import { DetailsService } from 'src/services/details/details.service';

@Component({
  selector: 'details-panel',
  templateUrl: './details-panel.component.html',
  styleUrls: ['./details-panel.component.scss'],
})
export class DetailsPanelComponent {
  public constructor(private details: DetailsService) {}
  @ViewChild('backdrop') backdrop: any;
  @ViewChild('detailsPanel') offcanvas: any;

  public detailsPanelComponent: any;
  public inputData: any;

  ngOnInit() {
    this.details.detailsPanel$.subscribe((data) => {
      this.detailsPanelComponent = data.component;
      this.inputData = data.data;
      this.backdrop.nativeElement.classList.add('backdrop--open');
      this.offcanvas.nativeElement.classList.add('panel--open');
    });
    this.details.closePanel$.subscribe(() => {
      this.closePanel();
    });
  }

  public dismissPanel(): void {
    this.details.closePanel('cancel');
  }

  public closePanel(): void {
    this.backdrop.nativeElement.classList.remove('backdrop--open');
    this.offcanvas.nativeElement.classList.remove('panel--open');
    this.detailsPanelComponent = undefined;
    this.inputData = undefined;
  }
}
