import { expect, tap } from '@git.zone/tstest/tapbundle';
import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
import { DeesElement, customElement, html } from '@design.estate/dees-element';

// Create a test element with shadow DOM
@customElement('test-shadow-element')
class TestShadowElement extends DeesElement {
  public getContextMenuItems() {
    return [
      { name: 'Shadow Item 1', iconName: 'box', action: async () => console.log('Shadow 1') },
      { name: 'Shadow Item 2', iconName: 'package', action: async () => console.log('Shadow 2') }
    ];
  }
  
  render() {
    return html`
      <div style="padding: 40px; background: #eee; border-radius: 8px;">
        <h3>Shadow DOM Content</h3>
        <p>Right-click anywhere inside this shadow DOM</p>
      </div>
    `;
  }
}

tap.test('should show context menu when right-clicking inside shadow DOM', async () => {
  // Create the shadow DOM element
  const shadowElement = document.createElement('test-shadow-element');
  document.body.appendChild(shadowElement);
  
  // Wait for element to be ready
  await shadowElement.updateComplete;
  
  // Get the content inside shadow DOM
  const shadowContent = shadowElement.shadowRoot!.querySelector('div');
  expect(shadowContent).toBeTruthy();
  
  // Simulate right-click on content inside shadow DOM
  const contextMenuEvent = new MouseEvent('contextmenu', {
    clientX: 100,
    clientY: 100,
    bubbles: true,
    cancelable: true,
    composed: true // Important for shadow DOM
  });
  
  shadowContent!.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 from shadow element are rendered
  const menuItems = contextMenu!.shadowRoot!.querySelectorAll('.menuitem');
  expect(menuItems.length).toBeGreaterThanOrEqual(2);
  
  // Check menu item text
  const menuTexts = Array.from(menuItems).map(item => 
    item.querySelector('.menuitem-text')?.textContent
  );
  expect(menuTexts).toContain('Shadow Item 1');
  expect(menuTexts).toContain('Shadow Item 2');
  
  // Clean up
  contextMenu!.remove();
  shadowElement.remove();
});

export default tap.start();