import {AfterViewInit, Component, DoCheck, Inject, OnInit} from '@angular/core';
import {FieldType} from '@ngx-formly/core';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';
import {MAT_BOTTOM_SHEET_DATA, MatBottomSheet, MatBottomSheetRef} from '@angular/material/bottom-sheet';

export interface DialogData {
  title: string;
  content: string;
}

@Component({
  selector: 'jhi-read-more',
  templateUrl: './read-more.component.html',
  styleUrls: ['./read-more.component.scss']
})
export class ReadMoreComponent extends FieldType implements OnInit, DoCheck, AfterViewInit {

  animal: string;
  name: string;
  eventBinded = false;
  allReadMoreLink: any;
  isMobile = false;

  constructor(public dialog: MatDialog,
              private bottomSheet: MatBottomSheet) {
    super();
  }

  ngOnInit(): void {
    console.log(this.field);
  }

  ngAfterViewInit() {

  }

  ngDoCheck() {
    this.allReadMoreLink = document.getElementById(`${this.field.key}`);
    // Masque le contenant
    if(this.allReadMoreLink) {
      this.allReadMoreLink.closest('formly-field')['style'].display = 'none';
      this.isMobile = window.getComputedStyle(this.allReadMoreLink).display !== 'none';
    }

    const allReadMore = document.querySelectorAll(`span[read-more-id=${this.field.key}]:not([binded="true"])`);
    if (allReadMore.length && this.allReadMoreLink) {
      allReadMore.forEach((element) => {
        element.setAttribute('binded', 'true');
        //Bind le readmore sur le lien
        element.addEventListener('click', (event) => {
          if (this.isMobile) {
            this.openDialogMobile();
          } else {
            this.openDialog();
          }
        });
      });
    }
  }

  openDialog()
    :
    boolean {
    const dialogRef = this.dialog.open(PopupReadMoreComponent, {
      width: '95%',
      data: {title: this.field.templateOptions.title, content: this.field.templateOptions.content}
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });

    return false;
  }

  openDialogMobile()
    :
    boolean {
    this.bottomSheet.open(PopupMobileReadMoreComponent, {
      data: {title: this.field.templateOptions.title, content: this.field.templateOptions.content}
    });
    return false;
  }


}

@Component({
  selector: 'jhi-dialog-overview-example-dialog',
  templateUrl: './read-more-popup.component.html',
})
export class PopupReadMoreComponent {

  constructor(
    public dialogRef: MatDialogRef<PopupReadMoreComponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {
  }

  close(): void {
    this.dialogRef.close();
  }

}

@Component({
  selector: 'jhi-bottom-sheet-overview-example-sheet',
  templateUrl: './read-more-popup-mobile.component.html',
})
export class PopupMobileReadMoreComponent {
  constructor(public bottomSheetRef: MatBottomSheetRef<PopupMobileReadMoreComponent>,
              @Inject(MAT_BOTTOM_SHEET_DATA) public data: DialogData) {
  }

  close(event: MouseEvent): boolean {
    this.bottomSheetRef.dismiss();
    event.preventDefault();
    return false;
  }
}