import { Component, EventEmitter, Input, Output } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ConfirmationDialogComponent } from 'src/app/confirmation-dialog/confirmation-dialog.component';
import { TextWidget } from 'src/app/dashboard.service';
import { AddTextDialogComponent } from '../add-text-dialog/add-text-dialog.component';
import { MatIconButton } from '@angular/material/button';
import { MarkdownComponent } from 'ngx-markdown';

@Component({
    selector: 'app-text-widget',
    templateUrl: './text-widget.component.html',
    standalone: true,
    imports: [MatIconButton, MarkdownComponent]
})
export class TextWidgetComponent {
  @Input()
  data! : TextWidget;

  @Output()
  deleted : EventEmitter<string> = new EventEmitter<string>();

  constructor(private dialog: MatDialog){}

  lines(): string[]{
    return typeof this.data.text == 'string' ? this.data.text.split(/\r?\n/) : [];
  }
  delete() {
    this.dialog
      .open(ConfirmationDialogComponent, {
        data: {title: "", text: "Delete text?", btnOkLabel: "Delete", btnCancelLabel: "Cancel"}
      })
      .afterClosed()
      .subscribe((result: boolean) => {
        if (result === true) {
          this.deleted.emit(this.data.id);
        }
      });   
  } 

  edit() {
    this.dialog.open(AddTextDialogComponent,{
      data: {text : this.data.text},
      width: '800px'
    }).afterClosed().subscribe((text?: string) => {
      if (text !== undefined) {
        this.data.text = text;
      }
    });
  }
}