import {
  Component,
  Inject,
  OnInit,
  QueryList,
  ViewChildren,
} from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
import {
  MatDialog,
  MatDialogRef,
  MAT_DIALOG_DATA,
} from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { WorkflowService } from '../../../../services/samwf/workflow.service';

interface arr {
  field: {};
  required: Boolean;
}

@Component({
  selector: 'app-task-form-validators',
  templateUrl: './task-form-validators.component.html',
  styleUrls: ['./task-form-validators.component.css'],
})
export class TaskFormValidatorsComponent implements OnInit {
  formGroup: FormGroup;
  modulos: any[] = [];
  form: any[] = [
    { name: 'Apellido paterno', id: 1, required: false },
    { name: 'Nombre completo', id: 2, required: false },
    { name: 'Telefono', id: 3, required: true },
  ];
  value: any[] = [];
  selectedOptions: any[] = [];
  selectedRequiered: any[] = [];
  isSelected: boolean = false;
  constructor(
    public dialogRef: MatDialogRef<any>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    private _snackBar: MatSnackBar,
    private _samwfService: WorkflowService
  ) {
    console.log(data);
    this.modulos = data.modulos;
    this.formGroup = this.createFormGroup();

    /*     for (let index = 0; index < this.form.length; index++) {
      this.form[index].isSelected = false;
      this.form[0].isSelected = true;
    } */
    // obtener los campos ya seleccioanados y buscar su index junto con el listado de campos
  }
  ngOnInit() {
    console.log(this.form);
  }

  private createFormGroup() {
    if (this.data.action == 'Registrar') {
      return new FormGroup({
        fields: new FormControl(''),
      });
    } else {
      return new FormGroup({
        fields: new FormControl(),
      });
    }
  }

  enviar() {
    console.log(this.selectedOptions);
    console.log(this.selectedRequiered);

    let arrFieldsAux: arr[] = [];
    arrFieldsAux = this.fields?.value;
    if (this.fields?.value.length > 0) {
      for (let index = 0; index < this.fields?.value.length; index++) {
        if (
          this.selectedRequiered.length > 0 &&
          this.selectedRequiered != undefined
        ) {
          for (
            let indexArr = 0;
            indexArr < this.selectedRequiered.length;
            indexArr++
          ) {
            if (
              this.fields?.value[index].id == this.selectedRequiered[indexArr]
            ) {
              arrFieldsAux[index].required = true;
            } else {
              console.log(arrFieldsAux[index].required);

              arrFieldsAux[index].required == false;
            }
          }
        } else {
        }
      }
      console.log(arrFieldsAux);
    } else {
      this._snackBar.open('Seleccione un campo primero', 'Cerrar', {
        duration: 3000,
      });
    }

    /*     if (
      this.selectedRequiered != undefined &&
      this.selectedRequiered.length > 0
    ) {
      for (let index = 0; index < this.selectedOptions.length; index++) {
        for (
          let indexArr = 0;
          indexArr < this.selectedRequiered.length;
          indexArr++
        ) {
          if (
            this.selectedRequiered[indexArr] == this.selectedOptions[index].id
          ) {
            this.selectedOptions[index].required = true;
          } else {
            this.selectedOptions[index].required = false;
          }
        }
      }

      this.dialogRef.close(this.selectedOptions);
    } else {
      this._snackBar.open('Seleccione un campo primero', 'Cerrar', {
        duration: 3000,
      });
    } */
  }

  get fields() {
    return this.formGroup.get('fields');
  }
}
