import { Component } from '@angular/core';

@Component({
  selector: 'app-ace-editor',
  templateUrl: './ace-editor.component.html',
  styleUrls: ['./ace-editor.component.css']
})
export class AceEditorComponent {
  // Sample data for illustration
  originalText = `This is a line.
This is another line.`;
  modifiedText = `This is a line.
This is a modified line.`;
  editorOptions: any;

  constructor() {
    this.editorOptions = {
      theme: 'ace/theme/monokai', // Set theme for the editor
      mode: 'ace/mode/text', // Set mode to text
      showGutter: true, // Show line numbers
      highlightActiveLine: true, // Highlight the active line
      highlightGutterLine: true, // Highlight the gutter line
      wrap: true, // Enable line wrapping
      readOnly: false, // Make the editor editable
      markers: this.getMarkers(), // Pass markers to highlight
    };
  }

  getMarkers() {
    const markers = [];
    const originalLines = this.originalText.split('\n');
    const modifiedLines = this.modifiedText.split('\n');
    
    // Iterate over both sets of lines
    originalLines.forEach((line, index) => {
      if (modifiedLines[index] !== line) {
        // Highlight word changes in this line
        markers.push({
          startRow: index,
          endRow: index,
          className: 'word-changed', // CSS class for word change highlighting
        });
      }
    });

    // Mark newly added lines as green on the right side
    modifiedLines.slice(originalLines.length).forEach((_, index) => {
      markers.push({
        startRow: originalLines.length + index,
        endRow: originalLines.length + index,
        className: 'new-line', // CSS class for new line highlighting
      });
    });

    return markers;
  }
}
