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-contextmenu
      
    ></dees-contextmenu>
    <dees-contextmenu
      
    ></dees-contextmenu>
  `;

  @property()
  public selectionMode: 'single' | 'multiple' = 'single';

  @property({
    type: Array,
  })
  public selectableChips: string[] = [];

  @property()
  public selectedChip: string = null;

  @property({
    type: Array,
  })
  public selectedChips: string[] = [];

  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);
  }
}