import { expect, tap, 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('Selection highlighting basic test', async () => {
  const editor: DeesInputWysiwyg = await webhelpers.fixture(
    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
  );
  
  // Import two blocks
  editor.importBlocks([
    { id: 'para-1', type: 'paragraph', content: 'First paragraph' },
    { id: 'head-1', type: 'heading-1', content: 'First heading' }
  ]);
  
  await editor.updateComplete;
  await new Promise(resolve => setTimeout(resolve, 500));
  
  // Get paragraph element
  const paraWrapper = editor.shadowRoot?.querySelector('[data-block-id="para-1"]');
  const paraComponent = paraWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
  const paraBlock = paraComponent?.shadowRoot?.querySelector('.block.paragraph') as HTMLElement;
  
  // Get heading element
  const headWrapper = editor.shadowRoot?.querySelector('[data-block-id="head-1"]');
  const headComponent = headWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
  const headBlock = headComponent?.shadowRoot?.querySelector('.block.heading-1') as HTMLElement;
  
  console.log('Found elements:', {
    paraBlock: !!paraBlock,
    headBlock: !!headBlock
  });
  
  // Focus paragraph
  paraBlock.focus();
  await new Promise(resolve => setTimeout(resolve, 100));
  
  // Check classes
  console.log('Paragraph classes:', paraBlock.className);
  console.log('Heading classes:', headBlock.className);
  
  // Check isSelected property
  console.log('Paragraph component isSelected:', paraComponent.isSelected);
  console.log('Heading component isSelected:', headComponent.isSelected);
  
  // Focus heading
  headBlock.focus();
  await new Promise(resolve => setTimeout(resolve, 100));
  
  // Check classes again
  console.log('\nAfter focusing heading:');
  console.log('Paragraph classes:', paraBlock.className);
  console.log('Heading classes:', headBlock.className);
  console.log('Paragraph component isSelected:', paraComponent.isSelected);
  console.log('Heading component isSelected:', headComponent.isSelected);
  
  // Check that heading is selected
  expect(headBlock.classList.contains('selected')).toBeTrue();
  expect(paraBlock.classList.contains('selected')).toBeFalse();
});

export default tap.start();