import { Component, Input, OnInit, Optional } from '@angular/core';
import { PanelLayoutComponent } from '@shared/layout/panel-layout/panel-layout.component';

@Component({
  selector: 'app-fl-backdrop',
  templateUrl: './fl-backdrop.component.html',
  styleUrls: ['./fl-backdrop.component.scss']
})
export class FlBackdropComponent implements OnInit {
  /*
  By default, adds an overlay on the whole app content area with a centered loading progress circle.
  Use "overlayParent" attribute like this: "<app-fl-backdrop overlayParent>" to overlay only the first relative
  positioned parent of the component. If used like this, circle will stay at the top of the overlay.
   */
  @Input() spinnerDiameter = 70;
  @Input() hideBackdrop = false;
  @Input() private overlayParent = false; // private property, may be non-boolean if used just as an attribute without value
  @Input() dynamicTop = null;
  public marginLeft: string; // needs to be negative of spinner half width, so it can be centered
  public overlayFirstRelativeParent: boolean; // if false, backdrop overlays whole app content area
  public circleReadyToBeShown = false;

  constructor(
    @Optional() public panelLayout?: PanelLayoutComponent,
  ) {
  }

  ngOnInit() {
    this.overlayFirstRelativeParent = this.overlayParent !== false;
    this.marginLeft = `-${this.spinnerDiameter / 2}px`;
    this.circleReadyToBeShown = true;
  }


}
