import { Component, OnInit, Input } from '@angular/core';
import { MainPageService } from '../../main-page.service';
import { InteractionEquationModel } from '../../../models/dictionaries/interaction-equation.model';
import { KatexOptions } from 'ng-katex';
import { EquationParser } from '../../../shared/equation-parser/equation-parser';

declare var $: any;


@Component({
  selector: 'app-interaction-equations-grid',
  templateUrl: './interaction-equations-grid.component.html',
  styleUrls: ['./interaction-equations-grid.component.scss']
})
export class InteractionEquationsComponent implements OnInit {
  converter = new EquationParser();
  isInteractionEquationsHidden = true;
  interactionEquationsGridData: InteractionEquationModel[];
  editedInteractionEquation = new InteractionEquationModel();
  convertedEquation: string;
  rowNumber: number;
  options: KatexOptions = {
    displayMode: true,
  };
  headers: string[] = ['Name', 'Code based', 'Equation', ''];

  constructor(private mainPageService: MainPageService) { }

  public ngOnInit(): void {
    this.loadGridDataFromDb();
    this.mainPageService.deleteInteractionEquationSubject.subscribe((value) => {
      this.interactionEquationsGridData = this.interactionEquationsGridData.filter(x => x._id !== value);
    });
  }

  loadGridDataFromDb() {
    this.mainPageService.loadAllInteracionEquations().subscribe((response) => {
      this.interactionEquationsGridData = response.sort(function (a, b) {
        return (a.name < b.name) ? -1 : 1;
      });
    });
  }

  toggle() {
    const actionButtons = $('.mat-icon-button');
    $(actionButtons[1]).css('visibility', 'hidden');
    for (let i = 2; i < actionButtons.length; i += 2) {
      $(actionButtons[i]).css('visibility', 'hidden');
    }
    this.isInteractionEquationsHidden = !this.isInteractionEquationsHidden;
  }

  saveNewInteractionEquation() {
    this.mainPageService.addNewInteracionEquationIntoDb(JSON.stringify(this.editedInteractionEquation)).subscribe((response) => {
      this.editedInteractionEquation._id = response;
      this.interactionEquationsGridData.push(this.editedInteractionEquation);
      this.editedInteractionEquation = new InteractionEquationModel();
    });
  }

  setChoosenElement(element: InteractionEquationModel, row) {
    if (row === -1) {
      this.editedInteractionEquation = new InteractionEquationModel();
      this.convertedEquation = "";
    } else {
      this.editedInteractionEquation = {
        ...element,
      };
      this.convertedEquation = this.converter.convertEquationToLatex(this.editedInteractionEquation.equation);
      this.rowNumber = row;
    }
  }

  editInteractionEquation() {
    console.log(this.interactionEquationsGridData[this.rowNumber]);
    Object.assign(this.interactionEquationsGridData[this.rowNumber], this.editedInteractionEquation);
    this.mainPageService.updateInteractionEquationInDb(JSON.stringify(this.editedInteractionEquation)).subscribe((response) => { });
  }

  deleteInteractionEquation(interactionEquation) {
    this.mainPageService.removeInteracionEquation(interactionEquation._id).subscribe((res) => { }, (error: any) => { });
    this.mainPageService.deleteInteractionEquationSubject.next(interactionEquation._id);
  }

  onChange(event) {
    this.convertedEquation = this.converter.convertEquationToLatex(event);
  }
}