/**
@license
Copyright (c) 2022 trading_peter
This program is available under Apache License Version 2.0
*/

import { LitElement, html, css } from 'lit';

/*
Displays a action menu suitable to put into tp-popup.
Sub menus can be defined.

To hide the icons in from of the menu items use something like this in your application styles:
  tp-cmd-item::part(icon) {
    display: none;
  }

Example:

<tp-popup>
  <tp-icon .icon=${icons.dots} slot="toggle"></tp-icon>

  <tp-cmd-menu slot="content">
    <tp-cmd-item>Pause</tp-cmd-item>

    <tp-cmd-item>
      More...
      <tp-cmd-menu slot="sub">
        <tp-cmd-item>Action 1</tp-cmd-item>

        <tp-cmd-item>
          Action 2
          <tp-cmd-menu slot="sub">
            <tp-cmd-item>Action a</tp-cmd-item>
            <tp-cmd-item .icon=${icons.error}>
              Action b
            </tp-cmd-item>
          </tp-cmd-menu>
        </tp-cmd-item>

      </tp-cmd-menu>
    </tp-cmd-item>

    <tp-cmd-item .icon=${icons.play}>Play</tp-cmd-item>
  </tp-cmd-menu>
</tp-popup>
*/
class TpCmdMenu extends LitElement {
  static get styles() {
    return [
      css`
        :host {
          display: block;
          border-radius: var(--tp-cmd-menu-border-radius, 4px);
          background: var(--tp-cmd-menu-background, #ffffff);
        }

        slot::slotted(:first-child) {
          border-radius: var(--tp-cmd-menu-border-radius, 4px) var(--tp-cmd-menu-border-radius, 4px) 0 0;
        }

        slot::slotted(:last-child) {
          border-radius: 0 0 var(--tp-cmd-menu-border-radius, 4px) var(--tp-cmd-menu-border-radius, 4px);
        }
      `
    ];
  }

  render() {
    return html`
      <div class="wrap"><slot></slot></div>
    `;
  }
}

window.customElements.define('tp-cmd-menu', TpCmdMenu);