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

tap.test('should show context menu with nested submenu', async () => {
  // Create a test element with context menu items
  const testDiv = document.createElement('div');
  testDiv.style.width = '200px';
  testDiv.style.height = '200px';
  testDiv.style.background = '#eee';
  testDiv.innerHTML = 'Right-click me';
  
  // Add getContextMenuItems method
  (testDiv as any).getContextMenuItems = () => {
    return [
      {
        name: 'Change Type',
        iconName: 'type',
        submenu: [
          { name: 'Paragraph', iconName: 'text', action: () => console.log('Paragraph') },
          { name: 'Heading 1', iconName: 'heading1', action: () => console.log('Heading 1') },
          { name: 'Heading 2', iconName: 'heading2', action: () => console.log('Heading 2') },
          { divider: true },
          { name: 'Code Block', iconName: 'fileCode', action: () => console.log('Code') },
          { name: 'Quote', iconName: 'quote', action: () => console.log('Quote') }
        ]
      },
      { divider: true },
      {
        name: 'Delete',
        iconName: 'trash2',
        action: () => console.log('Delete')
      }
    ];
  };
  
  document.body.appendChild(testDiv);
  
  // Simulate right-click
  const contextMenuEvent = new MouseEvent('contextmenu', {
    clientX: 100,
    clientY: 100,
    bubbles: true,
    cancelable: true
  });
  
  testDiv.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);
  
  // Check if menu items are rendered
  const menuItems = contextMenu!.shadowRoot!.querySelectorAll('.menuitem');
  expect(menuItems.length).toEqual(2); // "Change Type" and "Delete"
  
  // Hover over "Change Type" to trigger submenu
  const changeTypeItem = menuItems[0] as HTMLElement;
  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 submenus = document.querySelectorAll('dees-contextmenu');
  expect(submenus.length).toEqual(2); // Main menu and submenu
  
  // Clean up
  contextMenu!.remove();
  const submenu = submenus[1];
  if (submenu) submenu.remove();
  testDiv.remove();
});

export default tap.start();