import * as plugins from './plugins.js';
import {
  customElement,
  html,
  DeesElement,
  property,
  TemplateResult,
  cssManager,
  css,
  unsafeCSS,
} from '@designestate/dees-element';

import * as domtools from '@designestate/dees-domtools';

declare global {
  interface HTMLElementTagNameMap {
    'dees-contextmenu': DeesContextmenu;
  }
}

@customElement('dees-contextmenu')
export class DeesContextmenu extends DeesElement {
  public static demo = () => html`
    <dees-button>Hello</dees-button>
    <dees-contextmenu .menuItems=${[
      {
        name: 'copy',
        action: async () => {}
      },
      {
        name: 'edit',
        action: async () => {}
      }
    ] as plugins.tsclass.website.IMenuItem[]}></dees-contextmenu>
  `;

@property({
  type: Array,
})
public menuItems: plugins.tsclass.website.IMenuItem[] = [];

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        box-sizing: border-box;
      }

      .mainbox {
      }

      
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="mainbox">
        
      </div>
    `;
  }

  public async firstUpdated() {
    if (!this.textContent) {
      this.textContent = 'Button';
      this.performUpdate();
    }
  }

  public async selectChip(chipArg: string) {
    if (this.selectionMode === 'single') {
      if (this.selectedChip === chipArg) {
        this.selectedChip = null;
        this.selectedChips = [];
      } else {
        this.selectedChip = chipArg;
        this.selectedChips = [chipArg];
      }
    } else if (this.selectionMode === 'multiple') {
      if (this.selectedChips.includes(chipArg)) {
        this.selectedChips = this.selectedChips.filter((chipArg2) => chipArg !== chipArg2);
      } else {
        this.selectedChips.push(chipArg);
      }
      this.requestUpdate();
    }
    console.log(this.selectedChips);
  }
}