import { Component,  AfterViewInit } from '@angular/core';
import * as DiffMatchPatch from 'diff-match-patch';
import * as ace from 'ace-builds';


@Component({
  selector: 'app-text-compare',
  templateUrl: './text-compare.component.html',
  styleUrls: ['./text-compare.component.css']
})
export class TextCompareComponent implements AfterViewInit {
  editor1 : any;
  editor2 : any;
  diffMatchPatch: DiffMatchPatch;

  ngAfterViewInit() {
    this.diffMatchPatch = new DiffMatchPatch();
    this.editor1 = ace.edit('editor1');
    this.editor2 = ace.edit('editor2');
    this.editor1.setTheme('ace/theme/monokai');
    this.editor2.setTheme('ace/theme/monokai');
    this.editor2.session.setMode('ace/mode/css');
    this.editor1.session.setMode('ace/mode/plain_text');
    this.editor2.session.setMode('ace/mode/plain_text');
    this.editor1.setValue("Hello, world", -1);
    this.editor2.setValue("Hello, universe", -1);
  }

  compareFiles() {
    const text1 = this.editor1.getValue();
    const text2 = this.editor2.getValue();
    const diffs = this.diffMatchPatch.diff_main(text1, text2);
    this.diffMatchPatch.diff_cleanupSemantic(diffs);
    const htmlDiff = this.diffMatchPatch.diff_prettyHtml(diffs);

    // Display the differences in a separate ACE editor or any other way you want
    this.editor2.setValue(htmlDiff);
  }
  
  
  
}
