import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-save-filters-dialog',
  template: `
    <h1 mat-dialog-title>Guardar filtros</h1>
    <div mat-dialog-content>
      <mat-form-field>
        <mat-label>Nombre del filtro</mat-label>
        <input matInput [formControl]="filterNameControl" placeholder="Nombre del filtro">
        <mat-error *ngIf="filterNameControl.hasError('required')">
          El nombre es obligatorio
        </mat-error>
      </mat-form-field>
    </div>
    <div mat-dialog-actions>
      <button mat-button (click)="onCancel()">Cancelar</button>
      <button mat-button [disabled]="filterNameControl.invalid" (click)="onSave()">Guardar</button>
    </div>
  `
})
export class SaveFiltersDialogComponent {
  filterNameControl = new FormControl('', [Validators.required]);

  constructor(public dialogRef: MatDialogRef<SaveFiltersDialogComponent>) {}

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

  onSave(): void {
    if (this.filterNameControl.valid) {
      this.dialogRef.close(this.filterNameControl.value);
    }
  }
}
