flare-ui/src/app/shared/json-editor/json-editor.component.ts

import { Component, Input, forwardRef, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatChipsModule } from '@angular/material/chips';
import { MatExpansionModule } from '@angular/material/expansion';

@Component({
  selector: 'app-json-editor',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
    MatChipsModule,
    MatExpansionModule
  ],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => JsonEditorComponent),
      multi: true
    }
  ],
  template: `

    <mat-form-field appearance="outline" 

                    class="full-width" 

                    [class.json-valid]="isValidJson()"

                    [class.json-invalid]="!isValidJson() && value">

      <mat-label>{{ label }}</mat-label>

      <textarea matInput 

                #textareaRef

                [(ngModel)]="value"

                [rows]="rows"

                [placeholder]="placeholder"

                (keydown)="handleKeydown($event)"

                (click)="handleCursorMove($event)"

                (keyup)="handleCursorMove($event)"

                (blur)="onTouched()"

                class="code-editor"></textarea>

      <mat-hint>{{ hint }}</mat-hint>

      @if (!isValidJson() && value) {

        <mat-error>Invalid JSON format</mat-error>

      }

    </mat-form-field>



    <!-- JSON Validation Indicator -->

    <div class="json-validation-status">

      @if (isValidJson()) {

        <mat-icon class="valid">check_circle</mat-icon>

        <span class="valid">Valid JSON</span>

      } @else if (value) {

        <mat-icon class="invalid">error</mat-icon>

        <span class="invalid">Invalid JSON</span>

      }

    </div>



    <!-- Collapsible Variables Panel -->

    @if (availableVariables && availableVariables.length > 0) {

      <mat-expansion-panel class="variables-panel">

        <mat-expansion-panel-header>

          <mat-panel-title>

            <mat-icon>code</mat-icon>

            Available Variables

          </mat-panel-title>

          <mat-panel-description>

            Click to insert template variables

          </mat-panel-description>

        </mat-expansion-panel-header>

        

        <mat-chip-set>

          @for (variable of availableVariables; track variable) {

            <mat-chip (click)="insertVariable(variable)">

              {{ variable }}

            </mat-chip>

          }

        </mat-chip-set>

      </mat-expansion-panel>

    }

  `,
  styles: [`

    :host {

      display: block;

      margin-bottom: 16px;

    }



    .full-width {

      width: 100%;

    }



    .code-editor {

      font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;

      font-size: 13px;

      line-height: 1.5;

      tab-size: 2;

      -moz-tab-size: 2;

      white-space: pre;

    }



    .json-validation-status {

      display: flex;

      align-items: center;

      gap: 4px;

      margin-top: -6px;

      margin-bottom: 16px;

      font-size: 12px;

      

      mat-icon {

        font-size: 16px;

        width: 16px;

        height: 20px;

        margin-top:-2px;

        

        &.valid {

          color: #4caf50;

        }

        

        &.invalid {

          color: #f44336;

        }

      }

      

      span {

        &.valid {

          color: #4caf50;

        }

        

        &.invalid {

          color: #f44336;

        }

      }

    }



    .variables-panel {

      margin-bottom: 16px;

      box-shadow: none;

      border: 1px solid rgba(0, 0, 0, 0.12);

      

      .mat-expansion-panel-header {

        padding: 0 16px;

        height: 40px;

        

        .mat-panel-title {

          display: flex;

          align-items: center;

          gap: 8px;

          font-size: 13px;

          color: #666;

          

          mat-icon {

            font-size: 18px;

            width: 18px;

            height: 18px;

          }

        }

        

        .mat-panel-description {

          font-size: 12px;

          color: #999;

        }

      }

      

      .mat-expansion-panel-body {

        padding: 8px 16px 16px;

      }

      

      mat-chip-set {

        mat-chip {

          font-size: 12px;

          min-height: 24px;

          padding: 4px 8px;

          cursor: pointer;

          transition: all 0.2s;

          

          &:hover {

            background-color: #e3f2fd;

            color: #1976d2;

          }

        }

      }

    }



    // JSON field background colors

    .json-valid {

      textarea {

        background-color: rgba(76, 175, 80, 0.05) !important;

      }

    }

    

    .json-invalid {

      textarea {

        background-color: rgba(244, 67, 54, 0.05) !important;

      }

    }

  `]
})
export class JsonEditorComponent implements ControlValueAccessor, OnInit {
  @ViewChild('textareaRef') textareaRef!: ElementRef<HTMLTextAreaElement>;
  
  @Input() label = 'JSON Editor';
  @Input() placeholder = '{}';
  @Input() hint = 'Enter valid JSON';
  @Input() rows = 8;
  @Input() availableVariables: string[] = [];
  @Input() variableReplacer?: (json: string) => string;

  value = '';
  onChange: (value: string) => void = () => {};
  onTouched: () => void = () => {};

  private bracketPairs: { [key: string]: string } = {
    '{': '}',
    '[': ']',
    '(': ')'
  };

  private cursorPosition = 0;

  ngOnInit() {}

  writeValue(value: string): void {
    this.value = value || '';
  }

  registerOnChange(fn: (value: string) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  setDisabledState?(isDisabled: boolean): void {
    // Handle disabled state if needed
  }

  isValidJson(): boolean {
    if (!this.value || !this.value.trim()) return true;
    
    try {
      let jsonStr = this.value;
      
      // If variableReplacer is provided, use it to replace variables for validation
      if (this.variableReplacer) {
        jsonStr = this.variableReplacer(jsonStr);
      } else {
        // Default variable replacement for validation
        jsonStr = this.replaceVariablesForValidation(jsonStr);
      }
      
      JSON.parse(jsonStr);
      return true;
    } catch {
      return false;
    }
  }

  private replaceVariablesForValidation(jsonStr: string): string {
    let processed = jsonStr;
  
    processed = processed.replace(/\{\{([^}]+)\}\}/g, (match, variablePath) => {
      if (variablePath.includes('variables.')) {
        const varName = variablePath.split('.').pop()?.toLowerCase() || '';
        
        const numericVars = ['count', 'passenger_count', 'timeout_seconds', 'retry_count', 'amount', 'price', 'quantity', 'age', 'id'];
        const booleanVars = ['enabled', 'published', 'is_active', 'confirmed', 'canceled', 'deleted', 'required'];
        
        if (numericVars.some(v => varName.includes(v))) {
          return '1';
        } else if (booleanVars.some(v => varName.includes(v))) {
          return 'true';
        } else {
          return '"placeholder"';
        }
      }
      
      return '"placeholder"';
    });
  
    return processed;
  }

  handleKeydown(event: KeyboardEvent): void {
    if (event.key === 'Tab') {
      this.handleTabKey(event);
    } else if (event.key === 'Enter') {
      this.handleEnterKey(event);
    } else if (event.key in this.bracketPairs || Object.values(this.bracketPairs).includes(event.key)) {
      this.handleBracketInput(event);
    }
  }

  handleTabKey(event: KeyboardEvent): void {
    event.preventDefault();
    
    const textarea = event.target as HTMLTextAreaElement;
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    
    if (start !== end) {
      this.handleBlockIndent(textarea, !event.shiftKey);
    } else {
      const newValue = this.value.substring(0, start) + '\t' + this.value.substring(end);
      this.updateValue(newValue);
      
      setTimeout(() => {
        textarea.selectionStart = textarea.selectionEnd = start + 1;
        textarea.focus();
      }, 0);
    }
  }

  private handleBlockIndent(textarea: HTMLTextAreaElement, indent: boolean): void {
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const value = this.value;
    
    const lineStart = value.lastIndexOf('\n', start - 1) + 1;
    const lineEnd = value.indexOf('\n', end);
    const actualEnd = lineEnd === -1 ? value.length : lineEnd;
    
    const selectedLines = value.substring(lineStart, actualEnd);
    const lines = selectedLines.split('\n');
    
    let newLines: string[];
    if (indent) {
      newLines = lines.map(line => '\t' + line);
    } else {
      newLines = lines.map(line => line.startsWith('\t') ? line.substring(1) : line);
    }
    
    const newText = newLines.join('\n');
    const newValue = value.substring(0, lineStart) + newText + value.substring(actualEnd);
    
    this.updateValue(newValue);
    
    setTimeout(() => {
      const lengthDiff = newText.length - selectedLines.length;
      textarea.selectionStart = lineStart;
      textarea.selectionEnd = actualEnd + lengthDiff;
      textarea.focus();
    }, 0);
  }

  handleEnterKey(event: KeyboardEvent): void {
    event.preventDefault();
    
    const textarea = event.target as HTMLTextAreaElement;
    const start = textarea.selectionStart;
    const value = this.value;
    
    const lineStart = value.lastIndexOf('\n', start - 1) + 1;
    const currentLine = value.substring(lineStart, start);
    const indent = currentLine.match(/^[\t ]*/)?.[0] || '';
    
    const prevChar = value[start - 1];
    const nextChar = value[start];
    
    let newLineContent = '\n' + indent;
    let cursorOffset = newLineContent.length;
    
    if (prevChar in this.bracketPairs) {
      newLineContent = '\n' + indent + '\t';
      cursorOffset = newLineContent.length;
      
      if (nextChar === this.bracketPairs[prevChar]) {
        newLineContent += '\n' + indent;
      }
    }
    
    const newValue = value.substring(0, start) + newLineContent + value.substring(start);
    this.updateValue(newValue);
    
    setTimeout(() => {
      textarea.selectionStart = textarea.selectionEnd = start + cursorOffset;
      textarea.focus();
    }, 0);
  }

  handleBracketInput(event: KeyboardEvent): void {
    const textarea = event.target as HTMLTextAreaElement;
    const char = event.key;
    
    if (char in this.bracketPairs) {
      event.preventDefault();
      
      const start = textarea.selectionStart;
      const end = textarea.selectionEnd;
      const value = this.value;
      
      const selectedText = value.substring(start, end);
      const closingBracket = this.bracketPairs[char];
      
      let newValue: string;
      let cursorPos: number;
      
      if (selectedText) {
        newValue = value.substring(0, start) + char + selectedText + closingBracket + value.substring(end);
        cursorPos = start + 1 + selectedText.length;
      } else {
        newValue = value.substring(0, start) + char + closingBracket + value.substring(end);
        cursorPos = start + 1;
      }
      
      this.updateValue(newValue);
      
      setTimeout(() => {
        textarea.selectionStart = textarea.selectionEnd = cursorPos;
        textarea.focus();
      }, 0);
    } else if (Object.values(this.bracketPairs).includes(char)) {
      const start = textarea.selectionStart;
      const value = this.value;
      const nextChar = value[start];
      
      if (nextChar === char) {
        event.preventDefault();
        textarea.selectionStart = textarea.selectionEnd = start + 1;
      }
    }
  }

  handleCursorMove(event: any): void {
    this.cursorPosition = event.target.selectionStart;
  }

  insertVariable(variable: string): void {
    const textarea = this.textareaRef.nativeElement;
    const start = this.cursorPosition;
    const variableText = `{{${variable}}}`;
    
    const newValue = this.value.substring(0, start) + variableText + this.value.substring(start);
    this.updateValue(newValue);
    
    setTimeout(() => {
      const newPos = start + variableText.length;
      textarea.selectionStart = textarea.selectionEnd = newPos;
      textarea.focus();
    }, 0);
  }

  private updateValue(newValue: string): void {
    this.value = newValue;
    this.onChange(newValue);
  }
}