import { tap, expect, webhelpers } from '@push.rocks/tapbundle';

import * as deesCatalog from '../ts_web/index.js';
import { BlockRegistry } from '../ts_web/elements/wysiwyg/blocks/block.registry.js';
import { DeesWysiwygBlock } from '../ts_web/elements/wysiwyg/dees-wysiwyg-block.js';

// Import block registration to ensure handlers are registered
import '../ts_web/elements/wysiwyg/wysiwyg.blockregistration.js';

tap.test('Debug: should create empty wysiwyg block component', async () => {
  try {
    console.log('Creating DeesWysiwygBlock...');
    const block: DeesWysiwygBlock = await webhelpers.fixture(
      webhelpers.html`<dees-wysiwyg-block></dees-wysiwyg-block>`
    );
    console.log('Block created:', block);
    expect(block).toBeDefined();
    expect(block).toBeInstanceOf(DeesWysiwygBlock);
    console.log('Initial block property:', block.block);
    console.log('Initial handlers property:', block.handlers);
  } catch (error) {
    console.error('Error creating block:', error);
    throw error;
  }
});

tap.test('Debug: should set properties step by step', async () => {
  try {
    console.log('Step 1: Creating component...');
    const block: DeesWysiwygBlock = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
    expect(block).toBeDefined();
    
    console.log('Step 2: Setting handlers...');
    block.handlers = {
      onInput: () => console.log('onInput'),
      onKeyDown: () => console.log('onKeyDown'),
      onFocus: () => console.log('onFocus'),
      onBlur: () => console.log('onBlur'),
      onCompositionStart: () => console.log('onCompositionStart'),
      onCompositionEnd: () => console.log('onCompositionEnd')
    };
    console.log('Handlers set:', block.handlers);
    
    console.log('Step 3: Setting block data...');
    block.block = {
      id: 'test-block',
      type: 'divider',
      content: ' '
    };
    console.log('Block set:', block.block);
    
    console.log('Step 4: Appending to body...');
    document.body.appendChild(block);
    
    console.log('Step 5: Waiting for update...');
    await block.updateComplete;
    console.log('Update complete');
    
    console.log('Step 6: Checking shadowRoot...');
    expect(block.shadowRoot).toBeDefined();
    console.log('ShadowRoot exists');
    
  } catch (error) {
    console.error('Error in step-by-step test:', error);
    throw error;
  }
});

export default tap.start();