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-checkbox',
  templateUrl: './getbfo-checkbox.component.html',
  styleUrls: ['./getbfo-checkbox.component.css']
})
export class GETBFOCHECKBOXComponent implements OnInit {

  public formGroup: FormGroup;

  public task: Task = {
    name: 'Indeterminate',
    completed: false,
    color: 'primary',
    subtasks: [
      { name: 'Primary', completed: false, color: 'primary' },
      { name: 'Accent', completed: false, color: 'accent' },
      { name: 'Warn', completed: false, color: 'warn' },
    ],
  };

  public allComplete: boolean = false;

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

  constructor(
    private _snackBar: MatSnackBar,
    public dialogRef: MatDialogRef<GETBFOCHECKBOXComponent>,
    @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('checkbox', Validators.required),
      column: new FormControl('', Validators.required),
      name: new FormControl('', Validators.required),
      id: new FormControl('', [Validators.required, this.applyFilterControl]),
      label: new FormControl('', Validators.required),
      disabled: new FormControl(false),
      multi_check: new FormControl(false),
      data_check: new FormControl([]),
      num_col: new FormControl(1, Validators.required),
      num_row: new FormControl(1, 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 removeCheck() {
    this.data_check?.setValue([]);
    if (!this.multi_check!.value) {
      this.disabled?.setValue(false);
    }
  }

  public addOpcionCB(opcion: string) {
    if (opcion != '') {

      if (this.data_check?.value.length < 10) {
        let arrDataCheck = this.data_check?.value;
        arrDataCheck.push({
          name: opcion,
          completed: false,
        });

        this.data_check?.setValue(arrDataCheck);
      } else {
        this.openSnackBar("Solo se pueden ingresar 10 checkbox");
      }
    }

    if (this.multi_check?.value) {
      switch (this.data_check?.value.length) {
        case 2:
        case 3:
        case 4:
          this.num_row?.setValue(2);
          break;
        case 5:
        case 6:
        case 7:
          this.num_row?.setValue(3);
          break;
        case 8:
        case 9:
          this.num_row?.setValue(4);
          break;
      }
    }
  }

  public selectDeshabilitar() {
    if (!this.disabled!.value) {
      this.multi_check?.setValue(false);
    }
  }

  public updateAllComplete() {
    this.allComplete =
      this.task.subtasks != null &&
      this.task.subtasks.every((t) => t.completed);
  }

  public someComplete(): boolean {
    if (this.task.subtasks == null) {
      return false;
    }
    return (
      this.task.subtasks.filter((t) => t.completed).length > 0 &&
      !this.allComplete
    );
  }

  public setAll(completed: boolean) {
    this.allComplete = completed;
    if (this.task.subtasks == null) {
      return;
    }
    this.task.subtasks.forEach((t) => (t.completed = completed));
  }

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

  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 label() {
    return this.formGroup.get('label');
  }
  get disabled() {
    return this.formGroup.get('disabled');
  }
  get multi_check() {
    return this.formGroup.get('multi_check');
  }
  get data_check() {
    return this.formGroup.get('data_check');
  }
  get num_col() {
    return this.formGroup.get('num_col');
  }
  get num_row() {
    return this.formGroup.get('num_row');
  }
}

export interface Task {
  name: string;
  completed: boolean;
  color: string;
  subtasks?: Task[];
}
