import { tap, expect, webhelpers } from '@git.zone/tstest/tapbundle';

import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
import { DeesWysiwygBlock } from '../ts_web/elements/wysiwyg/dees-wysiwyg-block.js';

tap.test('should split paragraph content on Enter key', async () => {
  // Create the wysiwyg editor
  const editor: DeesInputWysiwyg = await webhelpers.fixture(
    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
  );
  
  // Import a test paragraph
  editor.importBlocks([{
    id: 'test-para-1',
    type: 'paragraph',
    content: 'Hello World'
  }]);
  
  await editor.updateComplete;
  
  // Wait for blocks to render
  await new Promise(resolve => setTimeout(resolve, 100));
  
  // Get the block wrapper and component
  const blockWrapper = editor.shadowRoot?.querySelector('[data-block-id="test-para-1"]');
  expect(blockWrapper).toBeDefined();
  
  const blockComponent = blockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
  expect(blockComponent).toBeDefined();
  expect(blockComponent.block.type).toEqual('paragraph');
  
  // Wait for block to render
  await blockComponent.updateComplete;
  
  // Test getSplitContent
  console.log('Testing getSplitContent...');
  const splitResult = blockComponent.getSplitContent();
  console.log('Split result:', splitResult);
  
  // Since we haven't set cursor position, it might return null or split at start
  // This is just to test if the method is callable
  expect(typeof blockComponent.getSplitContent).toEqual('function');
});

tap.test('should handle Enter key press in paragraph', async () => {
  // Create the wysiwyg editor
  const editor: DeesInputWysiwyg = await webhelpers.fixture(
    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
  );
  
  // Import a test paragraph
  editor.importBlocks([{
    id: 'test-enter-1',
    type: 'paragraph',
    content: 'First part|Second part' // | marks where we'll simulate cursor
  }]);
  
  await editor.updateComplete;
  await new Promise(resolve => setTimeout(resolve, 100));
  
  // Check initial state
  expect(editor.blocks.length).toEqual(1);
  expect(editor.blocks[0].content).toEqual('First part|Second part');
  
  // Get the block element
  const blockWrapper = editor.shadowRoot?.querySelector('[data-block-id="test-enter-1"]');
  const blockComponent = blockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
  const blockElement = blockComponent.shadowRoot?.querySelector('.block.paragraph') as HTMLDivElement;
  
  expect(blockElement).toBeDefined();
  
  // Set content without the | marker
  blockElement.textContent = 'First partSecond part';
  
  // Focus the block
  blockElement.focus();
  
  // Create and dispatch Enter key event
  const enterEvent = new KeyboardEvent('keydown', {
    key: 'Enter',
    code: 'Enter',
    bubbles: true,
    cancelable: true,
    composed: true
  });
  
  // Dispatch the event
  blockElement.dispatchEvent(enterEvent);
  
  // Wait for processing
  await new Promise(resolve => setTimeout(resolve, 200));
  
  // Check if block was split (this might not work perfectly in test environment)
  console.log('Blocks after Enter:', editor.blocks.length);
  console.log('Block contents:', editor.blocks.map(b => b.content));
});

export default tap.start();