import { Component, Inject } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { dialogBoxSettings } from '../../../common/modals/settings';
import { SetExpressionsComponent } from '../set-expressions/set-expressions.component';

@Component({
  selector: 'dr-set-disabled-hidden',
  templateUrl: './set-disabled-hidden.component.html',
  styleUrls: ['./set-disabled-hidden.component.scss']
})
export class SetDisabledHiddenComponent {

  table: { expression: string }[] = [];
  controlNames: string[] = [];
  frmExpression: FormGroup = new FormGroup({
    expression: new FormControl('', [Validators.required])
  });
  constructor(
    public dialogRef: MatDialogRef<SetDisabledHiddenComponent>, private dialog: MatDialog,
    @Inject(MAT_DIALOG_DATA) public data: { table: string[], controlNames: string[] }) {
    this.table = (data.table || []).map(expression => ({ expression })) || [];
    this.controlNames = data.controlNames || [];
  }

  onSubmitExpression(): void {
    this.dialogRef.close(this.table.map(m => m.expression));
  }

  fnOpenSetExpression() {
    this.dialog.open(SetExpressionsComponent, { ...dialogBoxSettings({ expression: this.frmExpression.controls.expression.value, controlNames: this.controlNames }), width: '60%' })
      .afterClosed().subscribe(expression => this.frmExpression.controls.expression.setValue(expression));
  }

  fnAdd() {
    if (this.frmExpression.valid) {
      const table = [...this.table, this.frmExpression.value];
      this.table = null;
      setTimeout(() => this.table = table);
      this.frmExpression.reset();
    }
  }

}