import { Component, Inject, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-workflow-fields-form',
  templateUrl: './workflow-fields-form.component.html',
  styleUrls: ['./workflow-fields-form.component.css'],
})
export class WorkflowFieldsFormComponent implements OnInit {
  formGroup: FormGroup;
  modules: any[] = [];
  fields: any[] = [
    {
      id: 'numero_articulo',
      max: 45,
      tag: 'input',
      icon: null,
      name: 'Número de artículo',
      type: 'number',
      label: 'Número de Artículo',
      value: null,
      num_col: 1,
      num_row: 1,
      pattern: null,
      disabled: false,
      readonly: false,
      required: true,
      placeholder: 'Ingrese el número del artículo',
    },
    {
      id: 'codigo_articulo',
      max: 45,
      tag: 'input',
      icon: null,
      name: 'Código del artículo',
      type: 'text',
      label: 'Código del Artículo',
      value: null,
      num_col: 1,
      num_row: 1,
      pattern: null,
      disabled: false,
      readonly: false,
      required: true,
      placeholder: 'Ingrese el código del artículo',
    },
    {
      id: 'nombre_articulo',
      max: 45,
      tag: 'input',
      icon: null,
      name: 'Nombre del artículo',
      type: 'text',
      label: 'Nombre del Artículo',
      value: null,
      num_col: 1,
      num_row: 1,
      pattern: null,
      disabled: false,
      readonly: false,
      required: true,
      placeholder: 'Ingrese el nombre del artículo',
    },
    {
      id: 'modelo',
      max: 45,
      tag: 'input',
      icon: null,
      name: 'Modelo',
      type: 'text',
      label: 'Modelo',
      value: null,
      num_col: 1,
      num_row: 1,
      pattern: null,
      disabled: false,
      readonly: false,
      required: true,
      placeholder: 'Ingrese el modelo',
    },
    {
      id: 'descripcion',
      max: 120,
      tag: 'textarea',
      icon: null,
      name: 'Descripción',
      type: 'text',
      label: 'Descripción',
      value: null,
      height: 80,
      num_col: 2,
      num_row: 2,
      pattern: null,
      disabled: false,
      readonly: false,
      required: true,
      placeholder: 'Ingrese una descripción del artículo',
    },
    {
      id: 'caracteristicas_princ',
      max: 200,
      tag: 'textarea',
      icon: null,
      name: 'Características',
      type: 'text',
      label: 'Características Principales',
      value: null,
      height: 80,
      num_col: 1,
      num_row: 2,
      pattern: null,
      disabled: false,
      readonly: false,
      required: true,
      placeholder: 'Ingrese las características principales',
    },
    {
      id: 'caracterisiticas_sec',
      max: 200,
      tag: 'textarea',
      icon: null,
      name: 'Características secundarias',
      type: 'text',
      label: 'Características Secundarias',
      value: null,
      height: 80,
      num_col: 1,
      num_row: 2,
      pattern: null,
      disabled: false,
      readonly: false,
      required: false,
      placeholder: 'Ingrese las características secundarias',
    },
  ];
  value: any[] = [];
  selectAll = false;

  users: any[] = [
    { id: 0, name: 'Juan Alvarez' },
    { id: 1, name: 'Alan Carranza' },
    { id: 2, name: 'Jean Benitez' },
    { id: 4, name: 'Emmanuel Estrada' },
  ];

  constructor(
    public dialogRef: MatDialogRef<any>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    this.formGroup = this.createFormGroup();
  }

  ngOnInit(): void {}

  private createFormGroup() {
    if (this.data.action == 'Registrar') {
      return new FormGroup({
        field: new FormControl(null, Validators.required),
        users_validate: new FormControl([], Validators.required),
        sequence: new FormControl(null),
        nextSequence: new FormControl(null),
        is_Available: new FormControl(null),
      });
    } else {
      return new FormGroup({
        field: new FormControl(null, Validators.required),
        users: new FormControl([], Validators.required),
        sequence: new FormControl(null),
        nextSequence: new FormControl(null),
        is_Available: new FormControl(null),
      });
    }
  }

  sendData(form: any) {
    let objAux = form.field;
    objAux.users_validate = form.users_validate;
    objAux.sequence = 10;
    objAux.nextSequence = 1000;
    objAux.is_Available = true;
    console.log(objAux);
  }

  valueChange(id: any) {
    if (this.value.indexOf(id) > -1) {
      const pos = this.value.indexOf(id);
      this.value.splice(pos, 1);
    } else {
      this.value.push(id);
    }
  }

  toggleAllSelection() {
    this.selectAll = !this.selectAll;
    if (this.selectAll == true) {
      this.value = this.users;
    } else {
      this.value = [];
    }
  }

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

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

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

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

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