/*
 * Copyright (C) 2019 Robert Bosch GmbH Copyright (C) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

import { Component } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { BciLoaderService, ModalWindowService } from '@bci-web-core/core';

@Component({
  selector: 'bci-modal-window-loader-demo-modal',
  styles: [
    `
    `,
  ],
  template: `
  <bci-modal-component
  [title]="'Loader Service'"
  [additionalTitle]="'Loader Service within a modal to prohibit the user from closing the dialog '"
  (closeHandler)="closeDialog()">
    <div>
      This is the content of the dialog. It can be a long text or just a short information. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div actions>
      <button bciPrimaryButton (click)="showLoader()">Show loader for 5 seconds</button>
      <button bciSecondaryButton (click)="closeDialog()">Close this Dialog</button>
    </div>
  </bci-modal-component>
  `,
})
export class ModalWindowLoaderDemoModalComponent {
  constructor(
    private _matDialogRef: MatDialogRef<ModalWindowLoaderDemoModalComponent>,
    private loaderService: BciLoaderService
  ) {}

  public closeDialog() {
    this._matDialogRef.close();
  }

  showLoader() {
    const loader = this.loaderService.showProgressBar();
    setTimeout(() => {
      this.loaderService.hideProgressBar(loader);
    }, 3000);
  }
}

@Component({
  selector: 'bci-loader-service-demo',
  templateUrl: './loader-service-demo.component.html',
  styleUrls: ['./loader-service-demo.component.scss'],
})
export class LoaderServiceDemoComponent {
  constructor(
    private loaderService: BciLoaderService,
    private modalWindowService: ModalWindowService,
    private matDialog: MatDialog
  ) {}

  showLoader() {
    const loader = this.loaderService.showProgressBar();
    setTimeout(() => {
      this.loaderService.hideProgressBar(loader);
    }, 5000);
  }

  openModal(): void {
    this.modalWindowService.openDialogWithComponent(
      ModalWindowLoaderDemoModalComponent,
      { width: '40rem' },
      this.matDialog
    );
  }
}
