import { html } from '@design.estate/dees-element';
import * as plugins from './plugins.js';

import { DeesContextmenu } from './dees-contextmenu.js';

export const demoFunc = () => html`
<style>
  .withMargin {
    display: block;
    margin: 20px;
  }
</style>
<dees-button @contextmenu=${(eventArg) => {
  DeesContextmenu.openContextMenuWithOptions(eventArg, [
    {
      name: 'copy',
      iconName: 'copySolid',
      action: async () => {
        return null;
      },
    },
    {
      name: 'edit',
      iconName: 'penToSquare',
      action: async () => {
        return null;
      },
    },{
      name: 'paste',
      iconName: 'pasteSolid',
      action: async () => {
        return null;
      },
    },
  ]);
}}>Right-Click for contextmenu</dees-button>
<dees-contextmenu class="withMargin"></dees-contextmenu>
<dees-contextmenu
  class="withMargin"
  .menuItems=${[
    {
      name: 'copy',
      iconName: 'copySolid',
      action: async () => {},
    },
    {
      name: 'edit',
      iconName: 'penToSquare',
      action: async () => {},
    },{
      name: 'paste',
      iconName: 'pasteSolid',
      action: async () => {},
    },
  ] as plugins.tsclass.website.IMenuItem[]}
></dees-contextmenu>
`;