import { html, type TemplateResult } from '@design.estate/dees-element';
import type { IContextMenuItem } from './dees-mobile-contextmenu.js';

export const demoFunc = (): TemplateResult => {
  const showContextMenu = (e: MouseEvent) => {
    e.preventDefault();

    const items: IContextMenuItem[] = [
      {
        label: 'Edit',
        icon: 'pencil',
        action: () => console.log('Edit clicked'),
      },
      {
        label: 'Duplicate',
        icon: 'copy',
        action: () => console.log('Duplicate clicked'),
      },
      { divider: true },
      {
        label: 'Share',
        icon: 'share',
        action: () => console.log('Share clicked'),
      },
      { divider: true },
      {
        label: 'Delete',
        icon: 'trash-2',
        danger: true,
        action: () => console.log('Delete clicked'),
      },
    ];

    import('./dees-mobile-contextmenu.js').then(({ DeesMobileContextmenu }) => {
      DeesMobileContextmenu.createAndShow(items, e.clientX, e.clientY);
    });
  };

  return html`
    <style>
      .demo-container {
        padding: 2rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      .demo-area {
        padding: 3rem;
        border: 2px dashed #e4e4e7;
        border-radius: 0.5rem;
        text-align: center;
        cursor: context-menu;
        user-select: none;
      }

      .demo-area:hover {
        border-color: #a1a1aa;
        background: #f4f4f5;
      }

      .demo-description {
        font-size: 0.875rem;
        color: #71717a;
        text-align: center;
      }
    </style>

    <div class="demo-container">
      <div class="demo-description">
        Right-click (or long-press on touch) to show context menu
      </div>

      <div
        class="demo-area"
        @contextmenu=${showContextMenu}
      >
        Right-click here
      </div>
    </div>
  `;
};