import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
import { DashboardCreationData } from 'src/app/dashboard.service';
import {  FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { MatButtonModule } from '@angular/material/button';
import {  OverlayModule } from '@angular/cdk/overlay';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@Component({
  selector: 'app-new-dashboard',
  templateUrl: './new-dashboard.component.html',
  standalone: true,
  imports: [
    BrowserModule,
    FormsModule,
    MatButtonModule,
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
    ReactiveFormsModule
  ]
})
export class NewDashboardComponent implements OnInit {


  registerForm = new FormGroup({
    name: new FormControl('', [Validators.pattern(/^[^\s]+.{0,63}$/), Validators.required]),
    description: new FormControl('', [Validators.maxLength(65535)]),
  });

  @ViewChild('name') nameInput!: ElementRef;

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

  ngOnInit(): void {
    //window.setTimeout(() => this.nameInput.nativeElement.focus(), 0);
  }

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