import {Component, Input, OnInit} from '@angular/core';
import {ScriptAccount} from "../../game-model/scriptAccounts/ScriptAccount";
import {ModelComponent} from "../../game-model/ModelComponent";
import {MatFormField} from "@angular/material/form-field";
import {MatInput} from "@angular/material/input";
import {FormControl, FormGroupDirective, FormsModule, NgForm, Validators} from "@angular/forms";
import {NgIf} from "@angular/common";
import {ErrorStateMatcher} from "@angular/material/core";

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}
@Component({
  selector: 'app-script-account-editor',
  templateUrl: './script-account-editor.component.html',
  styleUrl: './script-account-editor.component.scss'
})
export class ScriptAccountEditorComponent implements OnInit{
  @Input("scriptAccount") scriptAccount : ScriptAccount | undefined

  minCtrl: FormControl = new FormControl(0, [Validators.required, Validators.pattern('^[0-9]*$')]);
  maxCtrl: FormControl = new FormControl(100, [Validators.required, Validators.pattern('^[0-9]*$')]);
  matcher = new MyErrorStateMatcher();
  ngOnInit() {
    this.minCtrl.setValue(this.scriptAccount!.minValue);
    this.maxCtrl.setValue(this.scriptAccount!.maxValue);
  }

  onKeyPress(event: KeyboardEvent) {
    const input = event.key;
    const isDigit = /^\d+$/.test(input);
    if (!isDigit) {
      event.preventDefault();
    }
  }

  onUpdateMinValue() {
    this.scriptAccount!.minValue = Number(this.minCtrl.value);
  }

  onUpdateMaxValue() {
    this.scriptAccount!.maxValue = Number(this.maxCtrl.value);
  }
}