// compare-files.component.ts
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import * as ace from 'ace-builds';
import * as Diff from 'diff';

@Component({
  selector: 'app-compare-files',
  templateUrl: './compare-files.component.html',
  styleUrls: ['./compare-files.component.css']
})
export class CompareFilesComponent implements AfterViewInit {
  @ViewChild('editorLeft', { static: false }) editorLeftEl: ElementRef;
  @ViewChild('editorRight', { static: false }) editorRightEl: ElementRef;
  editorLeft: ace.Ace.Editor;
  editorRight: ace.Ace.Editor;
  file1: string = "This is the content of file 1.\nIt contains multiple lines of text.";
  file2: string = "This is the content of file 2.\nIt also contains some lines of text, but with some differences.";

  ngAfterViewInit(): void {
    if (this.editorLeftEl && this.editorRightEl) {
      this.editorLeft = ace.edit(this.editorLeftEl.nativeElement);
      this.editorRight = ace.edit(this.editorRightEl.nativeElement);
      this.editorLeft.setTheme('ace/theme/monokai');
      this.editorRight.setTheme('ace/theme/monokai');
      this.editorLeft.session.setMode('ace/mode/plain_text');
      this.editorRight.session.setMode('ace/mode/plain_text');

      this.editorLeft.renderer.setStyle('text-decoration: none;');  // Reset default style
      this.editorRight.renderer.setStyle('text-decoration: none;'); // Reset default style

      this.compareFiles();
    }
  }

  compareFiles(): void {
    if (this.file1 && this.file2) {
      const diffs = Diff.diffLines(this.file1, this.file2);
      let leftContent = '';
      let rightContent = '';

      diffs.forEach(part => {
        if (part.added) {
          rightContent += this.applyDiffStyle(part.value, 'lightgreen');
        } else if (part.removed) {
          leftContent += this.applyDiffStyle(part.value, 'lightcoral');
        } else {
          leftContent += part.value;
          rightContent += part.value;
        }
      });

      this.editorLeft.session.setValue(leftContent);
      this.editorRight.session.setValue(rightContent);

      // Apply custom renderer for further styling if needed
    //  this.applyCustomRenderer();
    }
  }

  applyDiffStyle(content: string, color: string): string {
    return `<span style="background-color: ${color};">${content}</span>`;
  }

  applyCustomRenderer(): void {
    this.editorLeft.renderer.on('renderLine', (e: any) => {
      e.html = this.applyDiffStyle(e.html, 'lightcoral');  // Apply custom style
    });
    
    this.editorRight.renderer.on('renderLine', (e: any) => {
      e.html = this.applyDiffStyle(e.html, 'lightgreen');  // Apply custom style
    });
  }

  compareFiles1(): void {
 
      const diffs = Diff.diffLines(this.file1, this.file2);
      let leftContent = '';
      let rightContent = '';

      diffs.forEach(part => {
        if (part.added) {
          rightContent += `<span style="background-color: lightgreen;">${part.value}</span>`;
        } else if (part.removed) {
          leftContent += `<span style="background-color: lightcoral;">${part.value}</span>`;
        } else {
          leftContent += part.value;
          rightContent += part.value;
        }
      });

      this.editorLeft.session.setValue(leftContent);
      this.editorRight.session.setValue(rightContent);
   
  }
}
