import { Component, Inject } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { dialogBoxSettings } from '../../common/modals/settings';
import { IFormBuilderCell, ConstControlsList } from '../../models/control';
import { SetOptionsComponent } from './set-options/set-options.component';
import { SetButtonLinkComponent } from './set-button-link/set-button-link.component';
import { SetValidatorsComponent } from './set-validators/set-validators.component';
import { SetExpressionsComponent } from './set-expressions/set-expressions.component';
import { SetDisabledHiddenComponent } from './set-disabled-hidden/set-disabled-hidden.component';

@Component({
  selector: 'dr-manage-control',
  templateUrl: './manage-control.component.html',
  styleUrls: ['./manage-control.component.scss']
})
export class ManageControlComponent {
  defaultArray: any[] = [];

  control: IFormBuilderCell;
  type: string;
  formFieldControl: FormGroup;
  formSelectControl: FormGroup;
  controlsList: IFormBuilderCell[] = [...ConstControlsList];
  controlNames: string[] = [];
  option: {
    endpoint?: string,
    options?: any[],
    valueName?: string,
    descriptionName?: string,
  };

  constructor(
    public dialog: MatDialog, public dialogRef: MatDialogRef<ManageControlComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {
    this.controlNames = data.controlNames;
    if (this.data.cell) {
      this.control = data?.cell;
      this.type = data?.cell?.type;
      this.createFieldForm();
    } else {
      this.createSelectForm();
    }
  }

  createSelectForm(): void {
    this.formSelectControl = new FormGroup({
      control: new FormControl('', [Validators.required])
    });
  }

  createFieldForm(): void {
    this.formFieldControl = new FormGroup({
      type: new FormControl(this.control?.type || this.type),
      controlName: new FormControl(this.control?.controlName || this.type.toLowerCase() + '_', [Validators.required, this.HasName()]),
      cellSize: new FormControl(this.control?.cellSize || 1),
      defaultValue: new FormControl(this.control?.defaultValue || ''),
      label: new FormControl(this.control?.label || this.type.toTitleCase(), [Validators.required]),
      min: new FormControl(this.control?.min || null),
      max: new FormControl(this.control?.max || null)
    });
  }

  onSelect(): void {
    this.type = this.formSelectControl.value.control;
    this.control = this.controlsList.find(f => f.type === this.type);
    // this.formSelectControl = null;
    // this.createFieldForm();
    this.dialogRef.close(this.control);
  }

  onSubmit(): void {
    this.formFieldControl.value.cellSize = this.formFieldControl.value.cellSize || 1;
    let valueReturn = { ... this.control, ...this.formFieldControl.value };

    if (this.option) {
      valueReturn = { ...valueReturn, ...this.option };
    }

    if (this.type === 'CHIPS') {
      valueReturn.defaultValue = this.defaultArray;
    }

    this.dialogRef.close(valueReturn);
  }

  onClose(): void {
    this.onSubmit();
  }

  openSetOptions(): void {
    this.dialog.open(SetOptionsComponent, dialogBoxSettings(this.control))
      .afterClosed().subscribe(option => this.option = option);
  }

  openSetButton(): void {
    this.dialog.open(SetButtonLinkComponent, dialogBoxSettings(this.control))
      .afterClosed().subscribe(option => this.option = option);
  }

  openSetValidators(): void {
    this.dialog.open(SetValidatorsComponent, { ...dialogBoxSettings({ validators: this.control.validators, controlNames: this.controlNames }), width: '60%' })
      .afterClosed().subscribe(validators => this.control.validators = validators || []);
  }

  openSetDisabledIf(): void {
    this.dialog.open(SetDisabledHiddenComponent, { ...dialogBoxSettings({ table: this.control.disabled, controlNames: this.controlNames }), width: '60%' })
      .afterClosed().subscribe(disabled => this.control.disabled = disabled || []);
  }

  openSetHiddenIf(): void {
    this.dialog.open(SetDisabledHiddenComponent, { ...dialogBoxSettings({ table: this.control.hidden, controlNames: this.controlNames }), width: '60%' })
      .afterClosed().subscribe(hidden => this.control.hidden = hidden || []);
  }

  HasName(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } | null => {
      const includes =
        this.controlNames.map(m => m.toUpperCase()).includes(control.value?.toUpperCase())
        && this.control.controlName.toUpperCase() !== control.value?.toUpperCase();
      return includes && !this.data?.options?.canDuplicate ? { exist: 'The control name must be unique' } : null;
    };
  }

}