import { Component, Input } from '@angular/core';
import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TransactionType } from '../../new-transaction/model/transaction-type.enum';
import { CommonModule } from '@angular/common';
import { MatOptionModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

@Component({
  selector: 'app-transaction-form',
  templateUrl: './transaction-form.component.html',
  styleUrls: ['./transaction-form.component.scss'],
  standalone: true,
  imports: [
    CommonModule
    , FormsModule
    , ReactiveFormsModule
    , MatFormFieldModule
    , MatOptionModule
    , MatSelectModule
    , MatInputModule
    , MatButtonModule
    , MatSlideToggleModule
  ]
})
export class TransactionFormComponent {

  @Input('transactionTypes') transactionTypes = [TransactionType.credit, TransactionType.fee, TransactionType.fine, TransactionType.levy, TransactionType.payment];

  @Input('totalSlider') showTotalSlider: boolean = true;
  @Input('text') text: string | undefined;

  description = 'Art wählen';

  translations = {
    fee: 'Gebühr',
    fine: 'Strafe',
    levy: 'Umlage',
    payment: 'Zahlung',
    credit: 'Guthaben',
    expense: 'Ausgabe'
  }


  form = new FormGroup({
    note: new FormControl('', []),
    amount: new FormControl(null, [Validators.required, Validators.min(0.01), Validators.max(10000)]),
    type: new FormControl(null, [Validators.required]),
    total: new FormControl(false, [])
  });

  transactionType(id: number | null): string {
    if (id == null) { return ''; }
    const key: any = TransactionType[id];
    const t = this.translations as any;
    return t[key];
  }

  onTypeChange() {
    if (this.form.controls.type.value != null && this.form.controls.type.value < 10) {
      this.description = 'Spieler bekommt Geld'
    } else {
      this.description = 'Spieler zahlt Geld'
    }
    
  }

}
