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

// Initialize the element
DeesInputWysiwyg;

tap.test('wysiwyg block movement during drag', 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: 'Block 1' },
    { id: 'block2', type: 'paragraph', content: 'Block 2' },
    { id: 'block3', type: 'paragraph', content: 'Block 3' },
  ];
  element.renderBlocksProgrammatically();
  
  await element.updateComplete;
  
  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
  const block1 = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement;
  
  // Start dragging block 1
  const mockDragEvent = {
    dataTransfer: {
      effectAllowed: '',
      setData: () => {},
      setDragImage: () => {}
    },
    clientY: 50,
    preventDefault: () => {},
  } as any;
  
  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
  
  // Wait for dragging class
  await new Promise(resolve => setTimeout(resolve, 20));
  
  // Verify drag state
  expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
  
  // Check that drag height was calculated
  console.log('Checking drag height...');
  const dragHandler = element.dragDropHandler as any;
  console.log('draggedBlockHeight:', dragHandler.draggedBlockHeight);
  console.log('draggedBlockContentHeight:', dragHandler.draggedBlockContentHeight);
  
  // Manually call updateBlockPositions to simulate drag movement
  console.log('Simulating drag movement...');
  const updateBlockPositions = dragHandler.updateBlockPositions.bind(dragHandler);
  
  // Simulate dragging down past block 2
  const block2 = editorContent.querySelector('[data-block-id="block2"]') as HTMLElement;
  const block2Rect = block2.getBoundingClientRect();
  const dragToY = block2Rect.bottom + 10;
  
  console.log('Dragging to Y position:', dragToY);
  updateBlockPositions(dragToY);
  
  // Check if blocks have moved
  await new Promise(resolve => setTimeout(resolve, 50));
  
  const blocks = Array.from(editorContent.querySelectorAll('.block-wrapper'));
  console.log('Block states after drag:');
  blocks.forEach((block, i) => {
    const classes = block.className;
    const offset = (block as HTMLElement).style.getPropertyValue('--drag-offset');
    console.log(`Block ${i}: classes="${classes}", offset="${offset}"`);
  });
  
  // Check that at least one block has move class
  const movedUpBlocks = editorContent.querySelectorAll('.block-wrapper.move-up');
  const movedDownBlocks = editorContent.querySelectorAll('.block-wrapper.move-down');
  console.log('Moved up blocks:', movedUpBlocks.length);
  console.log('Moved down blocks:', movedDownBlocks.length);
  
  // Clean up
  element.dragDropHandler.handleDragEnd();
  document.body.removeChild(element);
});

tap.start();