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/assets/json/reserved_words.json';

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

  public formGroup: FormGroup;
  private heightStand: number = 10;

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

  constructor(
    public dialogRef: MatDialogRef<ConfigureTextareaComponent>,
    @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('textarea', 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),
      num_col: new FormControl(1, Validators.required),
      num_row: new FormControl(1, Validators.required),
      height: new FormControl(this.heightStand, Validators.required),
      deleted: new FormControl(true),
    });
  }

  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;
  }

  public numColumn(type: string) {
    if (type == 'add') {
      if (this.formGroup.controls['num_col'].value + 1 <= this.formGroup.controls['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 numRows(type: string) {
    if (type == 'add') {
      if (this.formGroup.controls['num_row'].value + 1 <= 3) {
        this.formGroup.controls['height'].setValue(this.formGroup.controls['height'].value + 70);

        this.formGroup.controls['num_row'].setValue(this.formGroup.controls['num_row'].value + 1);
      }
    } else {
      if (this.formGroup.controls['num_row'].value - 1 >= 1) {
        this.formGroup.controls['height'].setValue(this.formGroup.controls['height'].value - 70);

        this.formGroup.controls['num_row'].setValue(this.formGroup.controls['num_row'].value - 1);
      }
    }
  }

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

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


}
