import { Component, Inject, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { ResourcesService } from 'src/app/services/resources/resources.service';
import * as reserved_words from 'src/assets/json/reserved_words.json';

@Component({
  selector: 'app-configure-radio',
  templateUrl: './configure-radio.component.html',
  styleUrls: ['./configure-radio.component.css']
})
export class ConfigureRadioComponent implements OnInit {

  public formGroup: FormGroup;
  public model: string = "";
  public option: string = "";
  public value: string = "";

  public num_cols: number;
  public arr_columns: Array<string>;

  constructor(
    public resourcesService: ResourcesService,
    public dialogRef: MatDialogRef<ConfigureRadioComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    this.formGroup = this.createFormGroup();
    this.num_cols = data.num_cols;
    this.arr_columns = data.column;
  }

  ngOnInit(): void {
  }

  private createFormGroup() {
    return new FormGroup({
      tag: new FormControl('radio', Validators.required),
      column: new FormControl('', Validators.required),
      name: new FormControl('', Validators.required),
      id: new FormControl('', [Validators.required, this.applyFilterControl]),
      multi_radio: new FormControl([]),
      num_col: new FormControl(1, Validators.required),
      num_row: new FormControl(1, Validators.required),
      deleted: new FormControl(true),
    });
  }

  public numColumn(type: string) {
    if (type == 'add') {
      if (this.formGroup.controls['num_col'].value + 1 <= this.num_cols) {
        this.formGroup.controls['num_col'].setValue(this.formGroup.controls['num_col'].value + 1);
      }
    } else {
      if (this.formGroup.controls['num_col'].value - 1 >= 1) {
        this.formGroup.controls['num_col'].setValue(this.formGroup.controls['num_col'].value - 1);
      }
    }
  }

  public addOpcionRA() {
    let filter = this.formGroup.controls['multi_radio'].value.filter((element: any) => element.option == this.option)
    if (filter.length == 0) {
      let filter_id = this.formGroup.controls['multi_radio']!.value.filter((element: any) => element.id == this.formGroup.controls['id'].value);
      let filter_value = this.formGroup.controls['multi_radio']!.value.filter((element: any) => element.value == this.value);
      if (filter_id.length == 0 && filter_value.length == 0) {
        let arrRadio = this.formGroup.controls['multi_radio']!.value;
        arrRadio.push({
          option: this.option,
          value: this.value
        });
        this.formGroup.controls['multi_radio']!.setValue(arrRadio);
        this.option = "";
        this.value = "";
      } else {
        this.resourcesService.openSnackBar("No se pueden repetir los valores o los identificadores");
      }
    }
  }

  public changeColumn() {
    let column_name = this.formGroup.controls['column'].value;
    this.formGroup.controls['id'].setValue(column_name);
    this.formGroup.controls['name'].setValue(column_name);
  }

  private applyFilterControl(control: any) {
    const filterValue = control.value;
    let arrWords = reserved_words;
    let filter = arrWords.reserved_words.filter((element: string) => element == filterValue.trim().toUpperCase());
    if (filter.length > 0) {
      return {
        validWords: {
          word: filterValue
        }
      }
    }
    return null;
  }

}
