import { Component, Inject } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

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

  expression: string;
  sStart: number = null;
  sEnd: number = null;
  controlNames: { value: string, description: string }[] = [];
  operators: { value: string, description: string }[] = [
    { value: '==', description: 'equal' },
    { value: '!=', description: 'not equal' },
    { value: '>', description: 'is greater than' },
    { value: '<', description: 'is less than' },
    { value: '>=', description: 'is greater or equal than' },
    { value: '<=', description: 'is less or equal than' }
  ];

  methods: { value: string, description: string }[] = [
    { value: '', description: '-' },
    { value: '.length', description: 'Length' },
    { value: '.lowercase', description: 'Lower Case' },
    { value: '.uppercase', description: 'Upper Case' },
    { value: '.titlecase', description: 'Title Case' }
  ];

  frmExpression: FormGroup = new FormGroup({
    field1: new FormControl('', [Validators.required]),
    method1: new FormControl(''),
    operator: new FormControl('==', [Validators.required]),
    field2: new FormControl('', [Validators.required]),
    method2: new FormControl('')
  });

  constructor(
    public dialogRef: MatDialogRef<SetExpressionsComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { expression: string, controlNames: string[] }) {
    this.expression = data.expression || '';
    this.controlNames = data.controlNames.map(m => ({ value: m, description: m })) || [];
  }

  displayFn(field: { value: string, description: string }): string {
    return field?.description || '';
  }

  fnGenerateExpression(): string {
    const obj = this.frmExpression.value;
    obj.field1 = obj.field1.description || obj.field1;
    obj.field2 = obj.field2.description || obj.field2;
    if (obj.method1 !== '.length') {
      if ((obj.method1 === '.lowercase' || obj.method1 === '.uppercase') || (isNaN(Number(obj.field2)))) {
        if (typeof (this.frmExpression.controls.field2.value) !== 'object') {
          obj.field2 = `"${obj.field2}"`;
        }
      }
    }
    if (obj.method2 !== '.length') {
      if ((obj.method2 === '.lowercase' || obj.method2 === '.uppercase') || (isNaN(Number(obj.field2)))) {
        if (typeof (this.frmExpression.controls.field1.value) !== 'object') {
          obj.field1 = `"${obj.field1}"`;
        }
      }
    }
    return `(${obj.field1}${obj.method1} ${obj.operator} ${obj.field2}${obj.method2})`;
  }

  fnMoveSelector(e): void {
    this.sStart = e.target.selectionStart;
    this.sEnd = e.target.selectionEnd;
  }

  onAddExpression(operator: ' && ' | ' || '): void {
    const sStart = this.sStart === 0 ? this.sStart : this.sStart - 1;
    const sEnd = this.sEnd === this.expression.length ? this.sEnd : this.sEnd  + 1;
    const sub = this.expression.substring(sStart, sEnd);
    if (sub.includes(')')) {
      const i = sub.lastIndexOf(')') + sStart;
      this.expression = '(' + this.expression.substr(0, i + 1) + operator + this.fnGenerateExpression() + this.expression.substr(i + 1) + ')';
    }
    if (sub.includes('(')) {
      const i = sub.indexOf(')') + sStart;
      this.expression = '(' + this.expression.substr(0, i + 1) + this.fnGenerateExpression() + operator + this.expression.substr(i + 1) + ')';
    }
  }

  onMergeExpression(): void {
    if (this.frmExpression.valid) {
      this.expression = this.fnGenerateExpression();
      this.frmExpression.setValue({
        field1: '',
        method1: '',
        operator: '==',
        field2: '',
        method2: ''
      });
    }
  }

  onSubmit(): void {
    this.dialogRef.close(this.expression);
  }

}