dees-catalog/ts_web/elements/wysiwyg/wysiwyg.keyboardhandler.ts

import { type IBlock } from './wysiwyg.types.js';
import { type IWysiwygComponent } from './wysiwyg.interfaces.js';

export class WysiwygKeyboardHandler {
  private component: IWysiwygComponent;

  constructor(component: IWysiwygComponent) {
    this.component = component;
  }

  /**
   * Handles keyboard events for blocks
   */
  async handleBlockKeyDown(e: KeyboardEvent, block: IBlock): Promise<void> {
    // Handle slash menu navigation
    if (this.component.slashMenu.visible && this.isSlashMenuKey(e.key)) {
      this.component.handleSlashMenuKeyboard(e);
      return;
    }

    // Handle formatting shortcuts
    if (this.handleFormattingShortcuts(e)) {
      return;
    }

    // Handle special keys
    switch (e.key) {
      case 'Tab':
        this.handleTab(e, block);
        break;
      case 'Enter':
        await this.handleEnter(e, block);
        break;
      case 'Backspace':
        await this.handleBackspace(e, block);
        break;
      case 'ArrowUp':
        await this.handleArrowUp(e, block);
        break;
      case 'ArrowDown':
        await this.handleArrowDown(e, block);
        break;
      case 'ArrowLeft':
        await this.handleArrowLeft(e, block);
        break;
      case 'ArrowRight':
        await this.handleArrowRight(e, block);
        break;
    }
  }

  /**
   * Checks if key is for slash menu navigation
   */
  private isSlashMenuKey(key: string): boolean {
    return ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(key);
  }

  /**
   * Handles formatting keyboard shortcuts
   */
  private handleFormattingShortcuts(e: KeyboardEvent): boolean {
    if (!(e.metaKey || e.ctrlKey)) return false;

    switch (e.key.toLowerCase()) {
      case 'b':
        e.preventDefault();
        // Use Promise to ensure focus is maintained
        Promise.resolve().then(() => this.component.applyFormat('bold'));
        return true;
      case 'i':
        e.preventDefault();
        Promise.resolve().then(() => this.component.applyFormat('italic'));
        return true;
      case 'u':
        e.preventDefault();
        Promise.resolve().then(() => this.component.applyFormat('underline'));
        return true;
      case 'k':
        e.preventDefault();
        Promise.resolve().then(() => this.component.applyFormat('link'));
        return true;
    }
    return false;
  }

  /**
   * Handles Tab key
   */
  private handleTab(e: KeyboardEvent, block: IBlock): void {
    if (block.type === 'code') {
      // Allow tab in code blocks
      e.preventDefault();
      // Insert two spaces for tab
      const selection = window.getSelection();
      if (selection && selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        range.deleteContents();
        const textNode = document.createTextNode('  ');
        range.insertNode(textNode);
        range.setStartAfter(textNode);
        range.setEndAfter(textNode);
        selection.removeAllRanges();
        selection.addRange(range);
      }
    } else if (block.type === 'list') {
      // Future: implement list indentation
      e.preventDefault();
    }
  }

  /**
   * Handles Enter key
   */
  private async handleEnter(e: KeyboardEvent, block: IBlock): Promise<void> {
    const blockOps = this.component.blockOperations;

    if (block.type === 'code') {
      if (e.shiftKey) {
        // Shift+Enter in code blocks creates a new block
        e.preventDefault();
        const newBlock = blockOps.createBlock();
        await blockOps.insertBlockAfter(block, newBlock);
      }
      // Normal Enter in code blocks creates new line (let browser handle it)
      return;
    }

    if (!e.shiftKey) {
      if (block.type === 'list') {
        await this.handleEnterInList(e, block);
      } else {
        // Split content at cursor position
        e.preventDefault();
        
        console.log('Enter key pressed in block:', {
          blockId: block.id,
          blockType: block.type,
          blockContent: block.content,
          blockContentLength: block.content?.length || 0,
          eventTarget: e.target,
          eventTargetTagName: (e.target as HTMLElement).tagName
        });
        
        // Get the block component - need to search in the wysiwyg component's shadow DOM
        const blockWrapper = this.component.shadowRoot?.querySelector(`[data-block-id="${block.id}"]`);
        console.log('Found block wrapper:', blockWrapper);
        
        const blockComponent = blockWrapper?.querySelector('dees-wysiwyg-block') as any;
        console.log('Found block component:', blockComponent, 'has getSplitContent:', !!blockComponent?.getSplitContent);
        
        if (blockComponent && blockComponent.getSplitContent) {
          console.log('Calling getSplitContent...');
          const splitContent = blockComponent.getSplitContent();
          
          console.log('Enter key split content result:', {
            hasSplitContent: !!splitContent,
            beforeLength: splitContent?.before?.length || 0,
            afterLength: splitContent?.after?.length || 0,
            splitContent
          });
          
          if (splitContent) {
            console.log('Updating current block with before content...');
            // Update current block with content before cursor
            blockComponent.setContent(splitContent.before);
            block.content = splitContent.before;
            
            console.log('Creating new block with after content...');
            // Create new block with content after cursor
            const newBlock = blockOps.createBlock('paragraph', splitContent.after);
            
            console.log('Inserting new block...');
            // Insert the new block
            await blockOps.insertBlockAfter(block, newBlock);
            
            // Update the value after both blocks are set
            this.component.updateValue();
            console.log('Enter key handling complete');
          } else {
            // Fallback - just create empty block
            console.log('No split content returned, creating empty block');
            const newBlock = blockOps.createBlock();
            await blockOps.insertBlockAfter(block, newBlock);
          }
        } else {
          // No block component or method, just create empty block
          console.log('No getSplitContent method, creating empty block');
          const newBlock = blockOps.createBlock();
          await blockOps.insertBlockAfter(block, newBlock);
        }
      }
    }
    // Shift+Enter creates line break (let browser handle it)
  }

  /**
   * Handles Enter key in list blocks
   */
  private async handleEnterInList(e: KeyboardEvent, block: IBlock): Promise<void> {
    const selection = window.getSelection();
    
    if (selection && selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      const currentLi = range.startContainer.parentElement?.closest('li');
      
      if (currentLi && currentLi.textContent === '') {
        // Empty list item - exit list mode
        e.preventDefault();
        const blockOps = this.component.blockOperations;
        const newBlock = blockOps.createBlock();
        await blockOps.insertBlockAfter(block, newBlock);
      }
      // Otherwise, let browser create new list item
    }
  }

  /**
   * Handles Backspace key
   */
  private async handleBackspace(e: KeyboardEvent, block: IBlock): Promise<void> {
    if (block.content === '' && this.component.blocks.length > 1) {
      e.preventDefault();
      const blockOps = this.component.blockOperations;
      const prevBlock = blockOps.getPreviousBlock(block.id);
      
      if (prevBlock) {
        blockOps.removeBlock(block.id);
        
        if (prevBlock.type !== 'divider') {
          await blockOps.focusBlock(prevBlock.id, 'end');
        }
      }
    }
  }

  /**
   * Handles ArrowUp key - navigate to previous block if at beginning
   */
  private async handleArrowUp(e: KeyboardEvent, block: IBlock): Promise<void> {
    const selection = window.getSelection();
    if (!selection || selection.rangeCount === 0) return;

    const range = selection.getRangeAt(0);
    const target = e.target as HTMLElement;
    
    // Check if cursor is at the beginning of the block
    const isAtStart = range.startOffset === 0 && range.endOffset === 0;
    
    if (isAtStart) {
      const firstNode = target.firstChild;
      const isReallyAtStart = !firstNode || 
        (range.startContainer === firstNode && range.startOffset === 0) ||
        (range.startContainer === target && range.startOffset === 0);
      
      if (isReallyAtStart) {
        e.preventDefault();
        const blockOps = this.component.blockOperations;
        const prevBlock = blockOps.getPreviousBlock(block.id);
        
        if (prevBlock && prevBlock.type !== 'divider') {
          await blockOps.focusBlock(prevBlock.id, 'end');
        }
      }
    }
  }

  /**
   * Handles ArrowDown key - navigate to next block if at end
   */
  private async handleArrowDown(e: KeyboardEvent, block: IBlock): Promise<void> {
    const selection = window.getSelection();
    if (!selection || selection.rangeCount === 0) return;

    const range = selection.getRangeAt(0);
    const target = e.target as HTMLElement;
    
    // Check if cursor is at the end of the block
    const lastNode = target.lastChild;
    
    // For different block types, check if we're at the end
    let isAtEnd = false;
    
    if (!lastNode) {
      // Empty block
      isAtEnd = true;
    } else if (lastNode.nodeType === Node.TEXT_NODE) {
      isAtEnd = range.endContainer === lastNode && range.endOffset === lastNode.textContent?.length;
    } else if (block.type === 'list') {
      // For lists, check if we're in the last item at the end
      const lastLi = target.querySelector('li:last-child');
      if (lastLi) {
        const lastTextNode = this.getLastTextNode(lastLi);
        isAtEnd = lastTextNode && range.endContainer === lastTextNode && 
                  range.endOffset === lastTextNode.textContent?.length;
      }
    } else {
      // For other HTML content
      const lastTextNode = this.getLastTextNode(target);
      isAtEnd = lastTextNode && range.endContainer === lastTextNode && 
                range.endOffset === lastTextNode.textContent?.length;
    }
    
    if (isAtEnd) {
      e.preventDefault();
      const blockOps = this.component.blockOperations;
      const nextBlock = blockOps.getNextBlock(block.id);
      
      if (nextBlock && nextBlock.type !== 'divider') {
        await blockOps.focusBlock(nextBlock.id, 'start');
      }
    }
  }

  /**
   * Helper to get the last text node in an element
   */
  private getLastTextNode(element: Node): Text | null {
    if (element.nodeType === Node.TEXT_NODE) {
      return element as Text;
    }
    
    for (let i = element.childNodes.length - 1; i >= 0; i--) {
      const lastText = this.getLastTextNode(element.childNodes[i]);
      if (lastText) return lastText;
    }
    
    return null;
  }

  /**
   * Handles ArrowLeft key - navigate to previous block if at beginning
   */
  private async handleArrowLeft(e: KeyboardEvent, block: IBlock): Promise<void> {
    const selection = window.getSelection();
    if (!selection || selection.rangeCount === 0) return;

    const range = selection.getRangeAt(0);
    
    // Check if cursor is at the very beginning (collapsed and at offset 0)
    if (range.collapsed && range.startOffset === 0) {
      const target = e.target as HTMLElement;
      const firstNode = target.firstChild;
      
      // Verify we're really at the start
      const isAtStart = !firstNode || 
        (range.startContainer === firstNode) ||
        (range.startContainer === target);
      
      if (isAtStart) {
        const blockOps = this.component.blockOperations;
        const prevBlock = blockOps.getPreviousBlock(block.id);
        
        if (prevBlock && prevBlock.type !== 'divider') {
          e.preventDefault();
          await blockOps.focusBlock(prevBlock.id, 'end');
        }
      }
    }
    // Otherwise, let the browser handle normal left arrow navigation
  }

  /**
   * Handles ArrowRight key - navigate to next block if at end
   */
  private async handleArrowRight(e: KeyboardEvent, block: IBlock): Promise<void> {
    const selection = window.getSelection();
    if (!selection || selection.rangeCount === 0) return;

    const range = selection.getRangeAt(0);
    const target = e.target as HTMLElement;
    
    // Check if cursor is at the very end
    if (range.collapsed) {
      const textLength = target.textContent?.length || 0;
      let isAtEnd = false;
      
      if (textLength === 0) {
        // Empty block
        isAtEnd = true;
      } else if (range.endContainer.nodeType === Node.TEXT_NODE) {
        const textNode = range.endContainer as Text;
        isAtEnd = range.endOffset === textNode.textContent?.length;
      } else {
        // Check if we're at the end of the last text node
        const lastTextNode = this.getLastTextNode(target);
        if (lastTextNode) {
          isAtEnd = range.endContainer === lastTextNode && 
                    range.endOffset === lastTextNode.textContent?.length;
        }
      }
      
      if (isAtEnd) {
        const blockOps = this.component.blockOperations;
        const nextBlock = blockOps.getNextBlock(block.id);
        
        if (nextBlock && nextBlock.type !== 'divider') {
          e.preventDefault();
          await blockOps.focusBlock(nextBlock.id, 'start');
        }
      }
    }
    // Otherwise, let the browser handle normal right arrow navigation
  }

  /**
   * Handles slash menu keyboard navigation
   * Note: This is now handled by the component directly
   */
}