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

import { ComponentType } from '@angular/cdk/portal';
import { DOCUMENT } from '@angular/common';
import { Inject, Injectable, TemplateRef } from '@angular/core';
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';

/**
 * Use this service to open dialogs/modal windows.
 * Future updates will ship with a standard dialog containing a header, content, action buttons and close icon button
 */
@Injectable({
  providedIn: 'root',
})
export class ModalWindowService {
  constructor(private matDialog: MatDialog, @Inject(DOCUMENT) private document: any) {}

  /**
   * Opens a modal dialog containing the given component.
   * @param componentOrTemplateRef Type of the component to load into the dialog,
   *     or a TemplateRef to instantiate as the dialog content.
   * @param config Extra configuration options.
   * @param matDialog inject MatDialog in constructor in components contained in lazy-loaded Modules
   * @returns Reference to the newly-opened dialog.
   */
  public openDialogWithComponent<T, D = any, R = any>(
    componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
    config?: MatDialogConfig<D>,
    matDialog?: MatDialog
  ): MatDialogRef<T, R> {
    // create empty dialog config if no was provided
    if (!config) {
      config = new MatDialogConfig();
    }

    //The dialog is set to fullscreen when opened only if the width is smaller than 481px. After opening the dialog in portrait mode, the dialog is also displayed in fullscreen in landscape mode and would have to be opened again
    if (window.innerWidth <= 480){
      config.height = '100vh'
      config.width = '100vw'
      config.maxWidth = '100vw'
    }
    //Changes to add a class dynamically to resolve has attribute issue for dialogs in firefox
    const additionalTitleClass = (config?.data as any)?.additionalTitle !== undefined ? 'additional-title' : '';
    if(additionalTitleClass && config && config?.panelClass !== undefined) {
      if(typeof(config.panelClass) === 'string') {
        config.panelClass = [config.panelClass, additionalTitleClass];// if a class string already exists
      } else {
        config.panelClass = [...config.panelClass , additionalTitleClass];// if list of classes already exists
      }
    }
     
    if (additionalTitleClass && config?.panelClass === undefined) {
      config.panelClass = [additionalTitleClass];// if it doesn't have any class added yet
    }
    const matDialogUsed = matDialog !== null && matDialog !== undefined ? matDialog : this.matDialog;
    const dialogRef = matDialogUsed.open<T, D, R>(componentOrTemplateRef, config);

    if (dialogRef && matDialogUsed.openDialogs.length > 0) {
      this.document.body.classList.remove('modal-closed');
      this.document.body.classList.add('modal');

      dialogRef.beforeClosed().subscribe(() => {
        if (matDialogUsed.openDialogs.length === 1) {
          this.document.body.classList.remove('modal');
          this.document.body.classList.add('modal-closed');
        }
      });
    }
    return dialogRef;
  }
}
