import { Component, Inject } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { CardItem, NoteItem } from '../../../models/app-state';
import { AppService } from '../../../services/app.service';

@Component({
  selector: 'app-note-edit-modal',
  templateUrl: 'note-edit-modal.component.html',
  styleUrls: ['./note-edit-modal.component.scss'],
})
export class NoteEditModalComponent {
  noteForm: FormGroup;
  data: NoteItem;

  constructor(
    @Inject(MAT_DIALOG_DATA) public cardItem: CardItem,
    public dialogRef: MatDialogRef<NoteEditModalComponent>,
    private appService: AppService,
    private fb: FormBuilder
  ) {
    this.data = cardItem.data as NoteItem;
    this.noteForm = this.fb.group(this.data);
  }

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

  save() {
    this.appService.editNote(
      {
        ...this.cardItem,
        data: {
          ...this.cardItem.data,
          title: this.noteForm.get('title').value,
          content: this.noteForm.get('content').value,
        },
      },
      this.cardItem
    );
    this.dialogRef.close();
  }
}