import { expect, tap } from '@git.zone/tstest/tapbundle';
import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';

// Initialize the element
DeesInputWysiwyg;

tap.test('wysiwyg global event listeners', async () => {
  const element = document.createElement('dees-input-wysiwyg');
  document.body.appendChild(element);
  
  await element.updateComplete;
  
  // Set initial content
  element.blocks = [
    { id: 'block1', type: 'paragraph', content: 'Test block' },
  ];
  element.renderBlocksProgrammatically();
  
  await element.updateComplete;
  
  const block1 = element.shadowRoot!.querySelector('[data-block-id="block1"]') as HTMLElement;
  console.log('Block 1 found:', !!block1);
  
  // Set up drag state manually without using handleDragStart
  element.dragDropHandler['draggedBlockId'] = 'block1';
  element.dragDropHandler['draggedBlockElement'] = block1;
  element.dragDropHandler['initialMouseY'] = 100;
  
  // Create drop indicator manually
  element.dragDropHandler['createDropIndicator']();
  
  // Test adding global event listeners
  console.log('Adding event listeners...');
  const handleGlobalDragOver = element.dragDropHandler['handleGlobalDragOver'];
  const handleGlobalDragEnd = element.dragDropHandler['handleGlobalDragEnd'];
  
  try {
    document.addEventListener('dragover', handleGlobalDragOver);
    console.log('dragover listener added');
    
    document.addEventListener('dragend', handleGlobalDragEnd);
    console.log('dragend listener added');
  } catch (error) {
    console.error('Error adding event listeners:', error);
    throw error;
  }
  
  // Test firing a dragover event
  console.log('Creating dragover event...');
  const dragOverEvent = new Event('dragover', {
    bubbles: true,
    cancelable: true
  });
  Object.defineProperty(dragOverEvent, 'clientY', { value: 150 });
  
  console.log('Dispatching dragover event...');
  document.dispatchEvent(dragOverEvent);
  console.log('dragover event dispatched');
  
  // Clean up
  document.removeEventListener('dragover', handleGlobalDragOver);
  document.removeEventListener('dragend', handleGlobalDragEnd);
  
  document.body.removeChild(element);
});

tap.test('wysiwyg setTimeout in drag start', async () => {
  const element = document.createElement('dees-input-wysiwyg');
  document.body.appendChild(element);
  
  await element.updateComplete;
  
  // Set initial content
  element.blocks = [
    { id: 'block1', type: 'paragraph', content: 'Test block' },
  ];
  element.renderBlocksProgrammatically();
  
  await element.updateComplete;
  
  const block1 = element.shadowRoot!.querySelector('[data-block-id="block1"]') as HTMLElement;
  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
  
  // Set drag state
  element.dragDropHandler['draggedBlockId'] = 'block1';
  element.dragDropHandler['draggedBlockElement'] = block1;
  
  console.log('Testing setTimeout callback...');
  
  // Test the setTimeout callback directly
  try {
    if (block1) {
      console.log('Adding dragging class to block...');
      block1.classList.add('dragging');
      console.log('Block classes:', block1.className);
    }
    if (editorContent) {
      console.log('Adding dragging class to editor...');
      editorContent.classList.add('dragging');
      console.log('Editor classes:', editorContent.className);
    }
  } catch (error) {
    console.error('Error in setTimeout callback:', error);
    throw error;
  }
  
  expect(block1.classList.contains('dragging')).toBeTrue();
  expect(editorContent.classList.contains('dragging')).toBeTrue();
  
  // Clean up
  document.body.removeChild(element);
});

export default tap.start();