import { Component, Inject } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { dialogBoxSettings } from '../../../common/modals/settings';
import { IFormValidator } from '../../../models/control';
import { SetExpressionsComponent } from '../set-expressions/set-expressions.component';

@Component({
  selector: 'dr-set-validators',
  templateUrl: './set-validators.component.html',
  styleUrls: ['./set-validators.component.scss']
})
export class SetValidatorsComponent {

  validators: IFormValidator[] = [];
  controlNames: string[] = [];
  types: string[] = ['REQUIRED', 'MIN', 'MAX', 'MINLENGTH', 'MAXLENGTH', 'PATTERN', 'EXPRESSION'];
  frmValidator: FormGroup = new FormGroup({
    type: new FormControl('REQUIRED', [Validators.required]),
    value: new FormControl('', [Validators.required]),
    error: new FormControl(''),
  });
  constructor(
    public dialogRef: MatDialogRef<SetValidatorsComponent>, private dialog: MatDialog,
    @Inject(MAT_DIALOG_DATA) public data: { validators: IFormValidator[], controlNames: string[] }) {
    this.validators = data.validators || [];
    this.controlNames = data.controlNames || [];
    this.fnChangeType('REQUIRED');
  }

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

  fnOpenSetExpression() {
    this.dialog.open(SetExpressionsComponent, { ...dialogBoxSettings({ expression: this.frmValidator.controls.value.value, controlNames: this.controlNames }), width: '60%' })
      .afterClosed().subscribe(expression => this.frmValidator.controls.value.setValue(expression));
  }

  dblClick(row: IFormValidator) {
    this.frmValidator.setValue(row);
    const validators = this.validators.filter(f => f !== row);
    this.validators = null;
    setTimeout(() => this.validators = validators);
  }

  fnAdd() {
    if (this.frmValidator.valid) {
      const validators = [...this.validators, this.frmValidator.value];
      this.validators = null;
      setTimeout(() => this.validators = validators);
      this.frmValidator.reset();
    }
  }

  fnChangeType(type: string) {
    if (type === 'REQUIRED') {
      this.frmValidator.controls.value.disable();
    } else {
      this.frmValidator.controls.value.enable();
    }
  }

}