import { Component, Inject, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import * as reserved_words from 'src/app/components/resources/json/reserved_words.json';
import * as data from 'src/assets/icons.json';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-getbfo-input',
  templateUrl: './getbfo-input.component.html',
  styleUrls: ['./getbfo-input.component.css'],
})
export class GETBFOINPUTComponent implements OnInit {
  public formGroup: FormGroup;
  public num_cols: number;
  public arr_columns: Array<string>;
  public arr_icons: Array<any> = [];
  filteredOptions?: Observable<string[]>;

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

  ngOnInit(): void {
    let data_icons = data;
    this.arr_icons = data_icons.icons;
    let arr_icons_aux: any = [];

    this.arr_icons.map((element) => {
      if (!arr_icons_aux.includes(element.name)) {
        arr_icons_aux.push(element.name);
      }
    });
    this.arr_icons = arr_icons_aux;

    this.filteredOptions = this.icon?.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value || '')),
    );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.arr_icons.filter(option => option.toLowerCase().includes(filterValue));
  }

  private createFormGroup() {
    return new FormGroup({
      tag: new FormControl('input', Validators.required),
      column: new FormControl('', Validators.required),
      name: new FormControl('', Validators.required),
      id: new FormControl('', [Validators.required, this.applyFilterControl]),
      type: new FormControl('text', Validators.required),
      placeholder: new FormControl(''),
      label: new FormControl('', Validators.required),
      max: new FormControl(45, Validators.required),
      value: new FormControl(''),
      pattern: new FormControl(),
      msgerror: new FormControl({ value: '', disabled: true}),
      icon: new FormControl(''),
      disabled_reg: new FormControl(false),
      disabled_mod: new FormControl(false),
      required_reg: new FormControl(false),
      required_mod: new FormControl(false),
      readonly_reg: new FormControl(false),
      readonly_mod: new FormControl(false),
      deleted: new FormControl(true),
      num_col: new FormControl(1, Validators.required),
      num_row: new FormControl(1, Validators.required),
    });
  }

  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 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) {
      //this.openSnackBar(`${filterValue} es una palabra reservada`);
      return {
        validWords: {
          word: filterValue,
        },
      };
    }

    return null;
  }

  public changeColumn() {
    let text_column = this.column?.value;
    this.name?.setValue(text_column);
    this.id?.setValue(text_column);
  }

  public changeType() {
    let type_input = this.type?.value;
    if (type_input === 'file') {
      this.placeholder?.disable();
      this.value?.disable();
      this.max?.disable();
      this.max?.setValue(0);
      this.pattern?.disable();
      this.msgerror?.disable();
      this.readonly_reg?.disable();
      this.readonly_mod?.disable();
      this.disabled_reg?.disable();
      this.disabled_mod?.disable();
      this.icon?.setValue('file_upload');
    } else {
      this.placeholder?.enable();
      this.value?.enable();
      this.max?.enable();
      this.max?.setValue(0);
      this.pattern?.enable();
      this.msgerror?.enable();
      this.readonly_reg?.enable();
      this.readonly_mod?.enable();
      this.disabled_reg?.enable();
      this.disabled_mod?.enable();
      this.icon?.setValue('');
    }
  }


  public validPattern(textPattern:string) {
    if (textPattern === '') {
      this.msgerror?.disable();
      this.msgerror?.clearValidators();
    }else{
      this.msgerror?.enable();
      this.msgerror?.setValidators(Validators.required);
      this.msgerror?.setValue('');
    }
  }


  get tag() {
    return this.formGroup.get('tag');
  }
  get column() {
    return this.formGroup.get('column');
  }
  get accept_file() {
    return this.formGroup.get('accept_file');
  }
  get name() {
    return this.formGroup.get('name');
  }
  get id() {
    return this.formGroup.get('id');
  }
  get type() {
    return this.formGroup.get('type');
  }
  get placeholder() {
    return this.formGroup.get('placeholder');
  }
  get label() {
    return this.formGroup.get('label');
  }
  get max() {
    return this.formGroup.get('max');
  }
  get value() {
    return this.formGroup.get('value');
  }
  get pattern() {
    return this.formGroup.get('pattern');
  }
  get msgerror() {
    return this.formGroup.get('msgerror');
  }
  get icon() {
    return this.formGroup.get('icon');
  }
  get disabled_reg() {
    return this.formGroup.get('disabled_reg');
  }
  get disabled_mod() {
    return this.formGroup.get('disabled_mod');
  }
  get required_reg() {
    return this.formGroup.get('required_reg');
  }
  get required_mod() {
    return this.formGroup.get('required_mod');
  }
  get readonly_reg() {
    return this.formGroup.get('readonly_reg');
  }
  get readonly_mod() {
    return this.formGroup.get('readonly_mod');
  }
  get num_col() {
    return this.formGroup.get('num_col');
  }
}
