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

tap.test('should change block type via context menu', async () => {
  // Create WYSIWYG editor with a paragraph
  const wysiwygEditor = new DeesInputWysiwyg();
  wysiwygEditor.value = '<p>This is a test paragraph</p>';
  document.body.appendChild(wysiwygEditor);
  
  // Wait for editor to be ready
  await wysiwygEditor.updateComplete;
  await new Promise(resolve => setTimeout(resolve, 100));
  
  // Get the first block
  const firstBlock = wysiwygEditor.blocks[0];
  expect(firstBlock.type).toEqual('paragraph');
  
  // Get the block element
  const firstBlockWrapper = wysiwygEditor.shadowRoot!.querySelector('.block-wrapper');
  expect(firstBlockWrapper).toBeTruthy();
  
  const blockComponent = firstBlockWrapper!.querySelector('dees-wysiwyg-block') as any;
  expect(blockComponent).toBeTruthy();
  await blockComponent.updateComplete;
  
  // Get the editable content inside the block's shadow DOM
  const editableBlock = blockComponent.shadowRoot!.querySelector('.block');
  expect(editableBlock).toBeTruthy();
  
  // Simulate right-click on the editable block
  const contextMenuEvent = new MouseEvent('contextmenu', {
    clientX: 200,
    clientY: 200,
    bubbles: true,
    cancelable: true,
    composed: true
  });
  
  editableBlock!.dispatchEvent(contextMenuEvent);
  
  // Wait for context menu to appear
  await new Promise(resolve => setTimeout(resolve, 100));
  
  // Check if context menu is created
  const contextMenu = document.querySelector('dees-contextmenu');
  expect(contextMenu).toBeInstanceOf(DeesContextmenu);
  
  // Find "Change Type" menu item
  const menuItems = Array.from(contextMenu!.shadowRoot!.querySelectorAll('.menuitem'));
  const changeTypeItem = menuItems.find(item => 
    item.querySelector('.menuitem-text')?.textContent?.trim() === 'Change Type'
  );
  expect(changeTypeItem).toBeTruthy();
  
  // Hover over "Change Type" to trigger submenu
  changeTypeItem!.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
  
  // Wait for submenu to appear
  await new Promise(resolve => setTimeout(resolve, 300));
  
  // Check if submenu is created
  const allMenus = document.querySelectorAll('dees-contextmenu');
  expect(allMenus.length).toEqual(2);
  
  const submenu = allMenus[1];
  const submenuItems = Array.from(submenu.shadowRoot!.querySelectorAll('.menuitem'));
  
  // Find "Heading 1" option
  const heading1Item = submenuItems.find(item => 
    item.querySelector('.menuitem-text')?.textContent?.trim() === 'Heading 1'
  );
  expect(heading1Item).toBeTruthy();
  
  // Click on "Heading 1"
  (heading1Item as HTMLElement).click();
  
  // Wait for menu to close and block to update
  await new Promise(resolve => setTimeout(resolve, 300));
  
  // Verify block type has changed
  expect(wysiwygEditor.blocks[0].type).toEqual('heading-1');
  
  // Verify DOM has been updated
  const updatedBlockComponent = wysiwygEditor.shadowRoot!
    .querySelector('.block-wrapper')!
    .querySelector('dees-wysiwyg-block') as any;
  
  await updatedBlockComponent.updateComplete;
  
  const updatedBlock = updatedBlockComponent.shadowRoot!.querySelector('.block');
  expect(updatedBlock?.classList.contains('heading-1')).toEqual(true);
  
  // Clean up
  wysiwygEditor.remove();
});

export default tap.start();