import { AfterViewInit, Component, ElementRef, Inject, Input, ViewChild, ViewEncapsulation } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { FormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MarkdownService } from 'src/app/_services/markdown.service';
import { ScalableComponent } from 'src/app/Scalable/scalable.component';


interface DialogData {
  note?: string;
}

@Component({
  selector: 'notes',
  templateUrl: './notes.component.html',
  styleUrls: ['./notes.component.scss'],
  standalone: true,
  imports: [CommonModule, FormsModule, MatButtonModule],
  encapsulation: ViewEncapsulation.None,
})
export class NotesComponent implements AfterViewInit {
  @Input()
  note?: string;

  @ViewChild("ref")
  ref?: ElementRef

  constructor(public md: MarkdownService) {}
  ngAfterViewInit(): void {
  }
}

@Component({
  selector: 'notes-editor',
  templateUrl: 'edit-notes.component.html',
  standalone: true,
  imports: [CommonModule, FormsModule, MatDialogModule, MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, NotesComponent, ScalableComponent],
  encapsulation: ViewEncapsulation.None,
})
export class EditNotesComponentDialog {
  note: string;
  constructor(
    public dialogRef: MatDialogRef<EditNotesComponentDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData,
  ) {
    if (data.note) {
      this.note = `${data.note}`;
    } else {
      this.note = "";
    }
  }

  cancel() {
    this.dialogRef.close();
  }
}