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

import { DOCUMENT } from '@angular/common';
import { Component, Inject } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ModalWindowService } from '@bci-web-core/core';
import { filter } from 'rxjs/operators';
import { ModalWindowDemoAllFeaturesModalComponent } from '../modal-window-demo-all-features-modal/modal-window-demo-all-features-modal.component';
import { ModalWindowDemoFormModalComponent } from '../modal-window-demo-form-modal/modal-window-demo-form-modal.component';
import { ModalWindowDemoModalComponent } from '../modal-window-demo-modal/modal-window-demo-modal.component';
import { ModalWindowDemoDisableModalComponent } from '../modal-window-demo-disable-modal/modal-window-demo-disable-modal.component';


const SIZES_WITHOUT_ADDITIONAL_TITLE: {viewport: string, minWidth: string, maxWidth: string, minHeight: string, maxHeight: string}[] = [
  {viewport: 'VP1', minWidth: 'full', maxWidth: 'full', minHeight: 'full', maxHeight: 'full'},
  {viewport: 'VP2', minWidth: '480px', maxWidth: '90%', minHeight: '158px', maxHeight: ' 90%'},
  {viewport: 'VP3', minWidth: '640px', maxWidth: '90%', minHeight: '162px', maxHeight: '90%'}
];

const SIZES_WITH_ADDITIONAL_TITLE: {viewport: string, minWidth: string, maxWidth: string, minHeight: string, maxHeight: string}[] = [
  {viewport: 'VP1', minWidth: 'full', maxWidth: 'full', minHeight: 'full', maxHeight: 'full'},
  {viewport: 'VP2', minWidth: '480px', maxWidth: '90%', minHeight: '207px', maxHeight: ' 90%'},
  {viewport: 'VP3', minWidth: '640px', maxWidth: '90%', minHeight: '211px', maxHeight: '90%'}
];
@Component({
  selector: 'bci-dialog-modal-demo',
  templateUrl: 'dialog-modal-demo.html',
  styleUrls: ['dialog-modal-demo.scss'],
})
export class DialogModalDemoComponent {
  public title = 'Welcome to the Dialog';
  public additionalTitle = '';
  public optionalButtonDisabled = false;
  public additionalTitleDisabled = false;
  public closeIcon = false;
  public closeIconDisabled = false;
  public isDialogCloseable = true;
  public returnData: string;
  config = {
    disableClose: false,
    panelClass: 'custom-overlay-pane-class',
    hasBackdrop: true,
    backdropClass: '',
    width: '',
    height: '',
    position: {
      top: '',
      bottom: '',
      left: '',
      right: '',
    },
    data: {
      message: 'Some dialog text',
    },
  };
  displayedColumns: string[] = ['viewport', 'minWidth','maxWidth', 'minHeight', 'maxHeight'];
  dataSource1 = SIZES_WITHOUT_ADDITIONAL_TITLE;
  dataSource2 = SIZES_WITH_ADDITIONAL_TITLE;
  
  constructor(
    public dialog: MatDialog,
    private _matDialog: MatDialog,
    @Inject(DOCUMENT) doc: any,
    private _modalWindowService: ModalWindowService
  ) {
    // Possible useful example for the open and closeAll events.
    // Adding a class to the body if a dialog opens and
    // removing it after all open dialogs are closed
    dialog.afterOpened.subscribe(() => {
      if (!doc.body.classList.contains('no-scroll')) {
        doc.body.classList.add('no-scroll');
      }
    });
    dialog.afterAllClosed.subscribe(() => {
      doc.body.classList.remove('no-scroll');
    });
  }
  toggleForAdditionalTitle(): void {
    if(this.additionalTitleDisabled){
      this.additionalTitleDisabled = !this.additionalTitleDisabled;
      this.additionalTitle = '';

    } else {
      this.additionalTitleDisabled = !this.additionalTitleDisabled;
      this.additionalTitle = 'Today is a good day';
    }
  }

  openModalWithData(): void {
    this._modalWindowService.openDialogWithComponent(
      ModalWindowDemoModalComponent,
      { 
        width: '38rem', 
        data: { title: this.title, optionalButtonDisabled: this.optionalButtonDisabled, closeIcon: this.closeIcon, closeIconDisabled: this.closeIconDisabled, additionalTitle: this.additionalTitle } 
      },
      this._matDialog
    );
  }

  openModalWithReturnData(): void {
    this._modalWindowService
      .openDialogWithComponent(ModalWindowDemoFormModalComponent, {
        width: "600px",
        autoFocus: 'first-tabbable'
      }, this._matDialog)
      .afterClosed()
      .subscribe((data) => {
        this.returnData = JSON.stringify(data, undefined, 2);
      });
  }

  openModalWithAll(): void {
    this._modalWindowService
      .openDialogWithComponent(
        ModalWindowDemoAllFeaturesModalComponent,
        {
          data: { postalCode: '71612' },
        },
        this._matDialog
      )
      .afterClosed()
      .pipe(filter((data) => !!data))
      .subscribe((data) => console.log('Name changed', data));
  }
  openModalWithDynamicallyDisableState(): void {
    this.title = "Closeable or non-closeable Dialog"
    this.additionalTitle = "Welcome to the dynamic Dialog"
    this._modalWindowService.openDialogWithComponent(
      ModalWindowDemoDisableModalComponent,
      { 
        width: '38rem', 
        data: { 
          title: this.title ,additionalTitle: this.additionalTitle, isDialogCloseable: this.isDialogCloseable} 
      },
      this._matDialog
    );
  }
}
