import { Component, Inject, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import * as reserved_words from 'src/app/components/resources/json/reserved_words.json';

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

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

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

  constructor(
    private _snackBar: MatSnackBar,
    public dialogRef: MatDialogRef<GETBFORADIOComponent>,
    @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.num_col?.value + 1 <= this.num_cols) {
        this.num_col?.setValue(this.num_col?.value + 1);
      }
    } else {
      if (this.num_col?.value - 1 >= 1) {
        this.num_col?.setValue(this.num_col?.value - 1);
      }
    }
  }

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

  public changeColumn() {
    let column_name = this.column?.value;
    this.id?.setValue(column_name);
    this.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;
  }

  private openSnackBar(message: string, action: string = 'Cerrar', duration: number = 4000) {
    this._snackBar.open(message, action, {
      duration: duration
    });
  }

  get tag() {
    return this.formGroup.get('tag');
  }
  get column() {
    return this.formGroup.get('column');
  }
  get name() {
    return this.formGroup.get('name');
  }
  get id() {
    return this.formGroup.get('id');
  }
  get multi_radio() {
    return this.formGroup.get('multi_radio');
  }
  get num_col() {
    return this.formGroup.get('num_col');
  }

}
