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 drop indicator creation', 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;
  
  // Check editorContentRef
  console.log('editorContentRef exists:', !!element.editorContentRef);
  console.log('editorContentRef tagName:', element.editorContentRef?.tagName);
  expect(element.editorContentRef).toBeTruthy();
  
  // Check initial state - no drop indicator
  let dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
  console.log('Drop indicator before drag:', dropIndicator);
  expect(dropIndicator).toBeFalsy();
  
  // Manually call createDropIndicator
  try {
    console.log('Calling createDropIndicator...');
    element.dragDropHandler['createDropIndicator']();
    console.log('createDropIndicator succeeded');
  } catch (error) {
    console.error('Error creating drop indicator:', error);
    throw error;
  }
  
  // Check drop indicator was created
  dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
  console.log('Drop indicator after creation:', dropIndicator);
  console.log('Drop indicator parent:', dropIndicator?.parentElement?.className);
  expect(dropIndicator).toBeTruthy();
  expect(dropIndicator!.style.display).toEqual('none');
  
  // Clean up
  document.body.removeChild(element);
});

tap.test('wysiwyg drag initialization with drop indicator', 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;
  
  // Mock drag event
  const mockDragEvent = {
    dataTransfer: {
      effectAllowed: '',
      setData: (type: string, data: string) => {
        console.log('setData:', type, data);
      },
      setDragImage: (img: any, x: number, y: number) => {
        console.log('setDragImage');
      }
    },
    clientY: 100,
    preventDefault: () => {},
  } as any;
  
  console.log('Starting drag...');
  
  try {
    element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
    console.log('Drag start succeeded');
  } catch (error) {
    console.error('Error during drag start:', error);
    throw error;
  }
  
  // Wait for async operations
  await new Promise(resolve => setTimeout(resolve, 20));
  
  // Check drop indicator exists
  const dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
  console.log('Drop indicator after drag start:', dropIndicator);
  expect(dropIndicator).toBeTruthy();
  
  // Check drag state
  console.log('Drag state:', element.dragDropHandler.dragState);
  expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
  
  // Clean up
  element.dragDropHandler.handleDragEnd();
  document.body.removeChild(element);
});

tap.start();