import { Component, Inject, ViewChild } from '@angular/core';
import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { TransactionFormComponent } from '../components/transaction-form/transaction-form.component';
import { CommonModule } from '@angular/common';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-team-transaction-dialog',
  templateUrl: './team-transaction-dialog.component.html',
  styleUrls: ['./team-transaction-dialog.component.scss'],
  standalone: true,
  imports: [CommonModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, TransactionFormComponent, MatButtonModule, MatDialogModule]
})
export class TeamTransactionDialogComponent {

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

  @ViewChild('formComponent') formComponent!: TransactionFormComponent;

  explanation = 'Hier kann eine Ausgabe oder Einnahme des Teams gebucht werden.';


  onOkClick() {
    const form = this.formComponent.form;
    const transaction = { ...form.value, teamId: this.data.teamId };

    if (transaction.amount != null && transaction.teamId != null && transaction.type != null) {
      this.dialogRef.close(transaction);
    }

     
  }

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

  get formInvalid(): boolean {
    return !this.formComponent || !this.formComponent.form.value ||  this.formComponent.form.value.amount == null || 
    this.formComponent.form.value.total == null || this.formComponent.form.value.type == null;
  }
}

interface DialogData {
  teamId: number;
}